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.

Answer 1

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

Answer 2

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.