Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 796
Randomblue Avatar asked Jul 29 '11 14:07

Randomblue


People also ask

How does jQuery UI draggable work?

jQueryUI provides draggable() method to make any DOM element draggable. Once the element is draggable, you can move that element by clicking on it with the mouse and dragging it anywhere within the viewport.

Why is draggable not working?

You have one of these problems: Your jQuery or jQuery UI Javascript path files are wrong. Your jQuery UI does not include draggable. Your jQuery or jQuery UI Javascript files are corrupted.


2 Answers

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

like image 68
ravi Avatar answered Oct 28 '22 19:10

ravi


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

like image 26
Bobby Jack Avatar answered Oct 28 '22 19:10

Bobby Jack