draggable button using jQuery UI

问题:

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>

View at JSFiddle

回答1:

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.

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

回答2:

Its not a bug , use this, $('input[type=button]').draggable({cancel:false}); You need to cancel the default click event of the button.

回答3:

JQuery disables drags from starting on the following elements by default:

• input, textarea, button, select, option

See the current spec here: https://api.jqueryui.com/draggable/#option-cancel

This is (to me) unnecessarily opinionated and annoying. But luckily it's easy to disable. Simply adjust the cancel option. For example, the following draggable initialization allows drags to start on all elements except .no-drag classes:

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

回答4:

looks like it's a jquery ui bug.

with another draggable plugin it works:

http://jsfiddle.net/CkKgD/

I found the plugin here: http://devongovett.wordpress.com/2009/12/01/event-delegated-drag-and-drop-jquery-plugin/

and in the first place I used it because of the lack of delegation support in jquery-ui draggable.

回答5:

You can make a div look like button using CSS. That's what I did most of time in that kind of cases.

回答6:

Having cancel:false following code would cancel the default click event:

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

Html part

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