draggable button using jQuery UI

Question

I can easily make a

element draggable, but not a element. How can I make the draggable, too?

相关标签:

Answer 1

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

Answer 2

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">

Answer 3

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().

Answer 4

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'
});

Answer 5

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.

Answer 6

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