Question

我正在尝试使用jquery UI创建drap-drop。我希望可拖动的一旦它离开可伸缩区域就应该恢复到它的位置。这里的问题是我可以放下它后可拖动的东西。另外我想知道我们如何检查哪些可拖动的内容掉落在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

Answer 1

更改

revert: "invalid"

要

revert : true

jqueryUI拖拽应该在退出时恢复

1 个答案: