Click on a draggable initiates dragging

Question

I have a tree structured ul li element in a page. I made the Leaf li to be draggable. We can drag and drop these li between their immediate parent li.

Everything going fine except one problem. If we click on the li, It started dragging and required another click to stop.

Just for information, We are using jquery treeview plugin to make this ul li structure a treeview.

Any help regarding this would be appreciated.

The [treeview plugin](http://bassistance.de/jquery-plugins/jquery-plugin-treeview/), we are using is old one and lacks documentation. It may have drag and drop feature but I have not found any example or documentation on that. So I implemented using jquery draggable. — Amitava Karan, Oct 21 '14 at 06:48

score 0 · Answer 1 · answered Oct 20 '14 at 15:23

0

Try using the Delay option when initializing the Draggable plugin. Setting this to 250 ms or something will delay the dragging so that if the user just clicks on the element it won't start dragging.

http://api.jqueryui.com/draggable/#option-delay

answered Oct 20 '14 at 15:23

Ariel De Prada

123
7

I have tried with that approach. But it did not work. When I put more delay like 2000ms. After I clicked on `li` element, It just staging draging after 2 sec. – Amitava Karan Oct 21 '14 at 07:25

score 0 · Accepted Answer · edited May 23 '17 at 11:43

we had a similar kind of issue due to the clash of Jquery Context Menu and draggable.

Update below code in jquery Context menu script file.

Ref : jQuery Context Menu clashes with jQuery Draggable for more info.

jQuery(this).mousedown( function(e) {
var evt = e;
if (e.button == 2) //Added to make this compatible with draggable
    evt.stopPropagation();
jQuery(this).mouseup( function(e) {
    if (e.button == 2) //Added to make this compatible with draggable
        e.stopPropagation();
    var srcElement = jQuery(this);

Hope this helps.

Click on a draggable initiates dragging

2 Answers2