How do I disable a jquery-ui draggable?

Question

How do I disable a jQuery draggable, e.g. during an UpdatePanel postback?

score 151 · Accepted Answer · answered Aug 24 '09 at 18:52

151

Could create a DisableDrag(myObject) and a EnableDrag(myObject) function

myObject.draggable( 'disable' )

Then

myObject.draggable( 'enable' )

answered Aug 24 '09 at 18:52

madcolor

8,105
11
51
74

2

This works. Full docs for draggable() are [here](http://jqueryui.com/demos/draggable/#options). Same goes for sortable() objects (if you're allowing drag-n-drop reordering.) – nickb Apr 07 '11 at 02:52
3

Which is to say that [the draggable() docs are (now?) here](http://api.jqueryui.com/draggable/), with nickb's link, above, going [to the demo](http://jqueryui.com/draggable/). ;) – ruffin Jan 15 '13 at 21:20
This gives me "cannot call methods on draggable prior to initialization; attempted to call method 'disable'" – Haseeb Zulfiqar May 21 '16 at 05:48
Mian Haseeb: See this: http://stackoverflow.com/questions/14955630/jquery-ui-draggable-error-cannot-call-methods-prior-to-init-in-updating-to-ve – madcolor May 23 '16 at 15:45

score 74 · Answer 2 · answered Sep 03 '10 at 15:11

74

To temporarily disable the draggable behavior use:

$('#item-id').draggable( "disable" )

To remove the draggable behavior permanently use:

$('#item-id').draggable( "destroy" )

answered Sep 03 '10 at 15:11

PhilB

11,732
2
19
15

6

I found that 'disable' has a css related side effect, but destroy works flawlessly. – Niels Brinch Apr 09 '13 at 19:06
1

@jedanput the side effect of using disable is the draggable elements have a greyed out appearance. destroy seems to leave the appearance alone. – samazi Oct 03 '14 at 11:42

CarinaPilar · Answer 3 · 2013-09-15T01:52:20.417

24

To enable/disable draggable in jQuery I used:

$("#draggable").draggable({ disabled: true });          

$("#draggable").draggable({ disabled: false });

@Calciphus answer didn't work for me with the opacity problem, so I used:

div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}

Worked on mobile devices either.

Here is the code: http://jsfiddle.net/nn5aL/1/

enable disable draggable jquery opacity problem html

edited Sep 15 '13 at 01:52

answered Sep 14 '13 at 00:27

CarinaPilar

1,054
2
13
20

Your JSfiddle doesn't seem to be working. The buttons don't click (using the latest Chrome). I tried updating it to links and calling `button()` but that didn't help. – ashes999 Nov 02 '13 at 19:44
2

out of all the solutions given, this one was the only one that worked 100% for me - all the others (using combinations of disable/destroy etc) just didn't fix the css issue. In my app using drag+drop I found the opacity was different for those elements that had been dragged since initialisation compared to those that hadn't been touched. All very messy. Thanks to @CarinaPilar for both the solution and the jsfiddle to prove it. – Andy Lorenz May 02 '14 at 21:51

score 11 · Answer 4 · answered Dec 28 '09 at 01:17

11

It took me a little while to figure out how to disable draggable on drop—use ui.draggable to reference the object being dragged from inside the drop function:

$("#drop-target").droppable({
    drop: function(event, ui) {
        ui.draggable.draggable("disable", 1); // *not* ui.draggable("disable", 1);
        …
    }
});

HTH someone

answered Dec 28 '09 at 01:17

Oli Studholme

2,600
22
16

Thanks for this. This solution appears to work well when using draggable/droppable directives in AngularJS. – Banjo Drill Sep 13 '15 at 16:57

score 11 · Answer 5 · answered Oct 17 '11 at 11:09

11

Seems like no one looked at the original documentation. May be there was no it at that time))

Initialize a draggable with the disabled option specified.

$( ".selector" ).draggable({ disabled: true });

Get or set the disabled option, after init.

//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );

answered Oct 17 '11 at 11:09

makaroni4

2,281
1
18
26

This works but has a side effect of making my div about 50% opacity... I have no idea why. – Jun 07 '13 at 18:55
@ScottBeeson Any time you disable something in jQuery, it adds "ui-state-disabled" class. You can remove it with: $(".ui-draggable").removeClass("ui-state-disabled") – Calciphus Sep 05 '13 at 21:12

Andrei Constantinescu · Answer 6 · 2015-11-27T10:05:15.767

7

In the case of a dialog, it has a property called draggable, set it to false.

$("#yourDialog").dialog({
    draggable: false
});

Eventhough the question is old, i tried the proposed solution and it did not work for the dialog. Hope this may help others like me.

edited Nov 27 '15 at 10:05

answered Jul 09 '13 at 18:14

Andrei Constantinescu

111
1
3

I'm not sure the question is specifically related to jQueryUI *Dialogs*, but I found your post helpful nonetheless. – Shawn Eary Aug 21 '13 at 03:48

score 3 · Answer 7 · answered Nov 11 '14 at 20:40

The following is what this would look like inside of .draggable({});

$("#yourDraggable").draggable({
    revert: "invalid" ,
    start: function(){ 
        $(this).css("opacity",0.3);
    },
    stop: function(){ 
        $(this).draggable( 'disable' )
    },
    opacity: 0.7,
    helper: function () { 
        $copy = $(this).clone(); 
        $copy.css({
            "list-style":"none",
            "width":$(this).outerWidth()
        }); 
        return $copy; 
    },
    appendTo: 'body',
    scroll: false
});

score 3 · Answer 8 · answered Oct 31 '17 at 10:41

I have a simpler and elegant solution that doesn't mess up with classes, styles, opacities and stuff.

For the draggable element - you add 'start' event which will execute every time you try to move the element somewhere. You will have a condition which move is not legal. For the moves that are illegal - prevent them with 'e.preventDefault();' like in the code below.

    $(".disc").draggable({
        revert: "invalid", 
        cursor: "move",
        start: function(e, ui){                
            console.log("element is moving");

            if(SOME_CONDITION_FOR_ILLEGAL_MOVE){
                console.log("illegal move");
                //This will prevent moving the element from it's position
                e.preventDefault();
            }    

        }
    });

You are welcome :)

score 0 · Answer 9 · answered Jul 05 '17 at 12:24

0

Change draggable attribute from

<span draggable="true">Label</span>

to

<span draggable="false">Label</span>

answered Jul 05 '17 at 12:24

ddagsan

1,786
18
21

How do I disable a jquery-ui draggable?

9 Answers9

Linked