使用jQuery UI的可拖动按钮

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>

查看JSFiddle

Answer 1

它不是一个bug,使用它,$('input[type=button]').draggable({cancel:false}); 你需要取消按钮的默认点击事件.

Answer 2

我自己没有对此进行测试,但我有一种直觉,它将与按钮的mousedown的默认事件处理程序有关.您可能想.preventDefault()在mousedown处理程序中试验事件.

或者,您可以将按钮包装在一个div中draggable().

Answer 3

默认情况下，JQuery 禁止从以下元素开始拖动：

• input, textarea, button, select,option

在此处查看当前规范：https : //api.jqueryui.com/draggable/#option-cancel

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

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