1

I am trying to create a drap-drop using jquery UI. I want that dragable should revert to its position as soon as it gets out of dropable area. The problem here is the dragable gets stick to dropable after I drop it. Also I want to know how we can check that which dragable is dropped inside dropable.

HTML:

<div class = 'dragableContainer'>
<div class = 'dragable'></div>
<div class = 'dragable'></div>
<div class = 'dragable'></div>
<div class = 'dragable'></div>
</div>
<div class = 'dropableContainer'>
<div class = 'dropable'></div>
<div class = 'dropable'></div>
<div class = 'dropable'></div>
<div class = 'dropable'></div>
</div>

jquery:

$(document).ready(function(){
$( "div.dropable" ).droppable({ 
    accept: "div.dragable",
    tolerance: "intersect",
    out: function( event, ui ) {
    console.log("I am out")
    },
    over: function( event, ui ) {
    console.log('I am over')
    }

});

$( "div.dragable" ).draggable({
    revert: "invalid"
});
});

CSS:

div.dropable {
    width: 150px;
    height: 150px;
    border: 5px solid;
    float: left;
    margin: 10px;
}

div.dragable {
    border: 5px solid;
    float: left;
    border: 5px solid;
    width: 70px;
    height: 70px;
    margin: 10px;
}


div.dragableContainer {
    height: 100px;
}

JSbin: http://jsbin.com/tuquk/3/edit

Triven
  • 351
  • 1
  • 4
  • 17
  • 1
    possible duplicate of [Revert a jQuery draggable object back to its original container on out event of droppable](http://stackoverflow.com/questions/5735270/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of) – j08691 Apr 07 '14 at 14:39

1 Answers1

-1

Change

revert: "invalid"

To

revert : true
Arun
  • 684
  • 1
  • 14
  • 25
  • 1
    The problem is that once a draggable is successfully dropped into a droppable, if you try and remove it, it goes back to the droppable, not the original position. – j08691 Apr 07 '14 at 14:35
  • Doing this will not let me drop the dragable and it will always revert to its original position. I want that dragble should revert to its position only when it is outside of dropable area. – Triven Apr 07 '14 at 14:37