Search jQuery

jQuery Forum

Using jQuery UI

haineault

Draggable button

Need more info

Need more info
Working on it
Answered

in Using jQuery UI • 12 years ago

Here's my problem..

I have a input field followed by a button. I'm trying to make the button draggable so when it is dragged and dropped into another input field, the current input field gets updated with the other input field's content formatted in a special way.

So far so good. Except that jQuery wont let me make the button draggable. I've tried to use an helper div and clone with no luck. It seems only containers elements like divs and spans can be draggable.

So my question is: Is it possible to achieve the behavior I want while keeping my current markup (a button element) ?

Replies(6)

joern.zae..

Re: Draggable button

12 years ago

Do you have just a <button>Label</button> element or actually a jQuery UI Button widget? A jsbin would help.

glen.hink..

Re: Draggable button

11 years ago

I'm having the same problem, with a button widget.

html:

<button>hello</button>

js:

$("button").button().draggable();

The button click event is called, but the button is not assigned the ui-draggable-dragging class.

wisepingui

Re: Draggable button

10 years ago

Hi,

i have the same problem. I have a draggable div and into this i have a span element for a jquery button. When I start dragging the div with mouse over the button, the drag event start correctly and positioning the div where I want, but the click event button is called anyway... I tested the disable option for the button at the start dragging event, but the click event is called anyway... There is some trick for solve this question?

Thank you so much

This is a sample code:
<div class="draggable">
<span class="myButton"></span>
<div class="contentDiv"></div>
</div>

tomclegg

Re: Draggable button

10 years ago

Solution:

$('button').button().draggable({cancel:false});

sergvol

Re: Draggable button

10 years ago

Hi,

Basically the solution " $('button').button().draggable({cancel:false}); " does make the button draggable but I'm trying to get the coordinates of where the button was dropped.

I'm using this post as reference:
http://stackoverflow.com/questions/849030/how-do-i-get-the-coordinate-position-after-using-jquery-drag-and-drop

But neither using droppable and the drop event nor using the stop event of draggable work with "$('button').button().draggable({cancel:false});"

Any ideas?