Question

我可以轻松地使<div>元素可拖动，但不能使<button>元素。我怎样才能使<button>可拖动？

$(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>

View at JSFiddle

Answer 1

这不是错误，请使用此$('input[type=button]').draggable({cancel:false}); 您需要取消按钮的默认点击事件。

Answer 2

我自己没有测试过，但我有一种直觉，它会与按钮的mousedown默认事件处理程序有关。您可能希望在mousedown处理程序中试验事件.preventDefault()。

或者，您可以将按钮包含在然后draggable()。

的div中

Answer 3

默认情况下，JQuery禁用drags从以下元素开始：

input，textarea，button，select，option

请参阅此处的当前规范：https://api.jqueryui.com/draggable/#option-cancel

这对我来说是不必要的自以为是和令人讨厌的。但幸运的是，很容易禁用。只需调整cancel选项即可。例如，以下可拖动初始化允许拖动开始除.no-drag类之外的所有元素：

$ele.draggable({
    cancel : '.no-drag'
});

Answer 4

看起来像是一个jquery ui bug。

使用另一个可拖动的插件：

http://jsfiddle.net/CkKgD/

我在这里找到了插件： http://devongovett.wordpress.com/2009/12/01/event-delegated-drag-and-drop-jquery-plugin/

并且首先我使用它，因为jquery-ui draggable缺乏委托支持。

Answer 5

你可以使用CSS使div看起来像按钮。这就是我在那种情况下所做的大部分时间。

Answer 6

拥有cancel:false个代码会取消默认点击事件：

$( "#btn1 " ).draggable({
   appendTo: "body",
   helper: "clone",
  cancel:false
});

Html部分

<input type="submit" id="btn1" value="button">

使用jQuery UI的可拖动按钮

6 个答案: