Question

I have multiple element that are jquery ui draggable, these elements can also be double clicked to open up a dialog which has a form.

The problem is that when users double click they hold the mouse down after the double click and open the dialog box as well as dragging the element, this leads to the element being moved all over the place behind the dialog box without realizing it.

I need to be able to stop the draggable when double clicking on it removing the draggable event entirely and stopping current draggables. I have tried:

$(".items").draggable( "option", "disabled", true );

then

$(".items").draggable( "option", "disabled", false );

on dialog close, but this doesnt work(it may stop the ability to create new draggable events but doesnt terminate the current dragging.

I have also seen some people saying destoy the draggable completely then readd it again, but that cannot be the solution as its ugly lol.

Annoying little problem but its causing problems in my system and i cant find an answer to it anywhere.

Answer 1

Try this, disable draggin on dialog open, and enable on close.

 $("#dialog").dialog({
        width: 150,
        height: 175,
        autoOpen: false,
        draggable: false,
        resizable: false,
        modal: true,
        title: 'Form',

        open: function(event, ui) {

            $('.draggable').draggable({
                cancel: '.draggable'
            });
        },
        close: function(event, ui) {

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

http://jsfiddle.net/EN3MD/22/