使用jQuery UI创建可拖动按钮

Question

我可以轻松地使一个

元素可拖动，但无法使元素可拖动。如何让也可被拖动呢？

$(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 上查看

- Randomblue

Answer 1

这不是一个Bug，使用以下代码：$('input[type=button]').draggable({cancel:false}); ，你需要取消按钮默认的点击事件。

- ravi

---

这也解决了我的问题。所以这确实是正确的答案。 - Terradon

Answer 2

我自己没有测试过，但我的直觉告诉我这可能与按钮的默认鼠标按下事件处理程序有关。您可以尝试在mousedown处理程序中使用event.preventDefault()进行实验。

或者，您可以将按钮包装在一个div中，然后通过 draggable() 来使其可拖动。

- Bobby Jack

---

你不能拖动按钮，只能拖动 div。如果你在按钮的右边轻微点击，你会发现这一点。这意味着按钮上的事件处理程序肯定会干扰，所以你可能需要取消它。 - Bobby Jack

Answer 3

JQuery默认禁用以下元素的拖动：

• input、textarea、button、select、option

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

对我来说，这是毫无必要的个人意见和讨厌的行为。但幸运的是，禁用它非常容易。只需调整cancel选项即可。例如，以下可拖动的初始化允许在除了.no-drag类之外的所有元素上开始拖动:

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

- tohster

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缺乏委托支持。

- BiAiB

Answer 5

你可以使用CSS将一个div样式看起来像按钮。在这种情况下，这是我经常做的事情。

- Tae-Sung Shin

---

你可能能够让它工作，但请注意这并不理想，因为它的语义性要差得多，而且你还需要进行自定义事件处理等操作。更好的方法是解决实际问题。 - Bobby Jack

@Bobby：没错！但我仍然很感兴趣看看Taesung的实际做法。 - Randomblue

Answer 6

以下代码中，如果有cancel:false，则会取消默认的点击事件：

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

HTML 部分

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

- Abdul Basit