使用jQuery UI的可拖动按钮 [英] draggable button using jQuery UI

问题描述

我可以轻松地将一个<div>元素拖放到一个元素中，而不是一个<button>元素.我如何也可以拖动<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>

在JSFiddle上查看

推荐答案

我自己还没有测试过，但是我有一个直觉，那就是它与鼠标按下按钮的默认事件处理程序有关.您可能要在mousedown处理程序中尝试使用event .preventDefault().

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.

或者，您可以将按钮包装在div中，然后再按draggable().

Alternatively, you could wrap the button in a div that you then draggable().

这篇关于使用jQuery UI的可拖动按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！