javascript - Jquery 拖动还原到特定的 div

Question

我目前有一个使用 Jquery UI 拖放的布局。我已经在 J​​query 网站上看到了用于恢复的代码，但我不确定我将如何检测某个 div 是否已被拖放到某个 div 上，并且如果是，则将其还原。

基本上我有 2 个 div，我只希望拖放能够放入一个 div，如果它没有被放入正确的 div，那么它会被还原 :)

脚本:

 <script type="text/javascript">
function shift(parent){
$("#"+parent).draggable({ handle: ".item", accept: "#floor", containment: "#floor", scroll: false, stack:"#floor div" });
}
</script>

可拖动:

<div id="drag" class="ui-widget-content" onmousedown="shift('example')"> </div>

DIV

<div id="container">
    <div id="floor"> </div>
    <div id="other"> </div>
</div>

draggable 位于容器内，但我只想将其拖放到地板内而不是其他容器内。

任何帮助将不胜感激

提前谢谢大家!

Answer 1

Hiya Andrew 工作演示 http://jsfiddle.net/BYsnc/

希望对你有帮助

好读:http://docs.jquery.com/UI/Draggable

行为:当用户将 drag me 拖到 floor 时，如果您将它拖到 other ，它将允许 else，它不会 B-)

解释

JQuery 代码

//将 Floor Div 设为可放置

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

//现在将拖动 div 设置为可拖动

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

//最后告诉 drag 关于它们的 Droppable 属性

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