使用 jQuery UI 的可拖动按钮答案

【问题标题】：draggable button using jQuery UI使用 jQuery UI 的可拖动按钮
【发布时间】：2011-10-16 01:07:09
【问题描述】：

我可以轻松地使 <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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

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

【讨论】：

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

【解决方案2】：

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

或者，您可以将按钮包装在一个 div 中，然后 draggable()。

【讨论】：

您不能拖动按钮，只能拖动 div：如果您稍微点击按钮右侧，您应该会看到。这表明按钮上的事件处理程序肯定会干扰，因此您可能需要取消它。

【解决方案3】：

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

input, textarea, button, select, option

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

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

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

【讨论】：

【解决方案4】：

看起来这是一个 jquery ui 错误。

与另一个可拖动的插件一起工作：

http://jsfiddle.net/CkKgD/

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

首先我使用它是因为 jquery-ui draggable 中缺乏委托支持。

【讨论】：

【解决方案5】：

您可以使用 CSS 使 div 看起来像按钮。在这种情况下，我大部分时间都是这样做的。

【讨论】：

你也许可以让它工作，但请注意它并不理想，因为它的语义要少得多，你必须为它做自定义事件处理等。更好地修复实际问题
@Bobby：没错！但我仍然对现场观看 Taesung 的做法很感兴趣。

【解决方案6】：

拥有cancel:false以下代码将取消默认点击事件：

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

HTML部分

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

【讨论】：