Jquery drag revert on drop to specific div

drag-and-drop, javascript, jquery, jquery-ui

Solution

Hiya Andrew Working Demo http://jsfiddle.net/BYsnc/

Hope this will help

Good read: http://docs.jquery.com/UI/Draggable

Behaviour: When user drag `drag me` to `floor` it will allow else if you drag it to `other` it wont B-)

Explanation

JQuery Code

// Make Floor Div as droppable

$('#floor').droppable({
    tolerance: 'fit'
});

// Now make drag div as draggable

$('#drag').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

// Finally tell drag that about their Droppable property

$('#drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});
​

Problem

I currently have a layout that uses Jquery UI Drag and Drop.. I have seen the code on the Jquery website for reverting but I am not sure how I would go about detecting if a div has been dropped on a certain div and if it has been then to revert it. Basically I have 2 divs and I only want the drag/drop to be able to drop inside one, if it doesn't get dropped in the right one then it is reverted :) Script: ``` <script type="text/javascript"> function shift(parent){ $("#"+parent).draggable({ handle: ".item", accept: "#floor", containment: "#floor", scroll: false, stack:"#floor div" }); } </script> ``` Draggable: ``` <div id="drag" class="ui-widget-content" onmousedown="shift('example')"> </div> ``` DIVs ``` <div id="container"> <div id="floor"> </div> <div id="other"> </div> </div> ``` The draggable is within the container but I only want it to be dropped within floor and not other. Any help would be much appreciated Thank you all in advance!

Original source