Question

How can i prevent the element which is dragged and dropped to a particular place from being re-dragged within the droppable area i’m using jquery ui.

Example – http://jsfiddle.net/DTYEB/

In above example element can be dragged into dropbox but the element can be re-dragged within the box is it possible to prevent this..

Answer 1

You can supply a callback function to the revert option, and set the disabled option to true if the draggable was dropped in a valid location:

$('#imageContainer div').draggable({  
    grid : [20,20],                
    cursor: 'move',
    revert: function(valid) {
        if(valid) {
            this.draggable("option", "disabled", true);   
        }
        return !valid;
    }
});

Here’s an updated fiddle.

This functionality does not seem to be in the jQuery UI documentation. It states that the revert value should be a boolean or a string, but doesn’t mention that it can be a function too. This came up in another question yesterday, and I wrote a short article detailing the use of this callback function which will explain it further if you’re interested.