jqueryUI 可拖动应该在脱离时恢复

Question

我正在尝试使用 jquery UI 创建一个拖放。我希望可拖动的对象一旦离开可放置区域就应该恢复到它的位置。这里的问题是可拖动的在我放下后会粘在可放置的位置上。另外我想知道我们如何检查哪个可拖动对象被放置在可放置对象中。

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

Answer 1

改变

revert: "invalid"

到

revert : true