CODEWITHSUNDEEP
jquery-ui
ErnieStings
ErnieStings

Reputation: 6403

How do I disable a jquery-ui draggable?

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

Upvotes: 105

Views: 162076

Answers (9)

Combine
Combine

Reputation: 4214

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 :)

Upvotes: 3

ddagsan
ddagsan

Reputation: 1826

Change draggable attribute from

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

to

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

Upvotes: 0

Andrei Constantinescu
Andrei Constantinescu

Reputation: 141

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.

Upvotes: 7

maudulus
maudulus

Reputation: 11025

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
});

Upvotes: 3

CarinaPilar
CarinaPilar

Reputation: 1074

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/

Upvotes: 25

makaroni4
makaroni4

Reputation: 2281

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 );

Upvotes: 11

PhilB
PhilB

Reputation: 11892

To temporarily disable the draggable behavior use:

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

To remove the draggable behavior permanently use:

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

Upvotes: 74

Oli Studholme
Oli Studholme

Reputation: 2678

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

Upvotes: 11

madcolor
madcolor

Reputation: 8170

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

myObject.draggable( 'disable' )

Then 

myObject.draggable( 'enable' )

Upvotes: 152

Related Questions