使用 jQuery UI 的可拖动按钮
我可以轻松地使
$(init);
function init() {
$('#makeMeDraggable1').draggable();
$('#makeMeDraggable2').draggable();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<div id="makeMeDraggable1">Drag me!</div>
<button id="makeMeDraggable1">Drag me!</button>I can easily make a <div> element draggable, but not a <button> element. How can I make the <button> draggable, too?
$(init);
function init() {
$('#makeMeDraggable1').draggable();
$('#makeMeDraggable2').draggable();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<div id="makeMeDraggable1">Drag me!</div>
<button id="makeMeDraggable1">Drag me!</button>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
这不是一个错误，使用这个，
$('input[type=button]').draggable({cancel:false});需要取消按钮的默认点击事件。
Its not a bug , use this,
$('input[type=button]').draggable({cancel:false});You need to cancel the default click event of the button.
我自己还没有测试过这一点，但我有一种直觉，它与按钮的默认鼠标按下事件处理程序有关。您可能想在 mousedown 处理程序中尝试 event
.preventDefault()。或者，您可以将按钮包装在 div 中，然后使用
draggable()。I haven't tested this myself, but I've got an intuition that it will have something to do with a button's default event-handler for mousedown. You might want to experiment with event
.preventDefault()inside a mousedown handler.Alternatively, you could wrap the button in a div that you then
draggable().默认情况下，JQuery 禁止从以下元素开始拖动：
input、textarea、button、select、选项在此处查看当前规范：https://api.jqueryui.com/ Draggable/#option-cancel
这个（对我来说）不必要的固执己见和烦人。但幸运的是，它很容易禁用。只需调整
取消选项即可。例如，以下可拖动初始化允许在除.no-drag类之外的所有元素上开始拖动：JQuery disables drags from starting on the following elements by default:
input,textarea,button,select,optionSee the current spec here: https://api.jqueryui.com/draggable/#option-cancel
This is (to me) unnecessarily opinionated and annoying. But luckily it's easy to disable. Simply adjust the
canceloption. For example, the following draggable initialization allows drags to start on all elements except.no-dragclasses:看起来这是一个 jquery ui bug。
与另一个可拖动插件一起使用：
http://jsfiddle.net/CkKgD/
我在这里找到了该插件：
http://devongovett.wordpress。 com/2009/12/01/event-delegate-drag-and-drop-jquery-plugin/
首先我使用它是因为缺乏委派支持jquery-ui 可拖动。
looks like it's a jquery ui bug.
with another draggable plugin it works:
http://jsfiddle.net/CkKgD/
I found the plugin here:
http://devongovett.wordpress.com/2009/12/01/event-delegated-drag-and-drop-jquery-plugin/
and in the first place I used it because of the lack of delegation support in jquery-ui draggable.
您可以使用 CSS 使 div 看起来像按钮。在这种情况下，我大部分时间都是这样做的。
You can make a div look like button using CSS. That's what I did most of time in that kind of cases.
使用
cancel:false以下代码将取消默认点击事件：Html 部分
Having
cancel:falsefollowing code would cancel the default click event:Html part