CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
Randomblue
Randomblue

Reputation: 116403

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

Upvotes: 18

Views: 21839

Answers (6)

Abdul Basit
Abdul Basit

Reputation: 125

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

Upvotes: 0

Bobby Jack
Bobby Jack

Reputation: 16048

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

Upvotes: 9

tohster
tohster

Reputation: 7103

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

Upvotes: 5

ravi
ravi

Reputation: 581

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

Upvotes: 58

BiAiB
BiAiB

Reputation: 14161

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.

Upvotes: 1

Tae-Sung Shin
Tae-Sung Shin

Reputation: 20620

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

Upvotes: 0

Related Questions