Jquery拖动恢复到特定div

时间:2012-05-31 23:30:04

标签: javascript jquery jquery-ui drag-and-drop

我目前有一个使用Jquery UI拖放的布局..我已经看到Jquery网站上的代码用于恢复,但我不知道如何检测div是否已被删除某个div如果它已经恢复它。

基本上我有2个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>

可拖动装置位于容器内,但我只希望将其放在地板内而不是其他位置。

非常感谢任何帮助

提前谢谢大家!

1 个答案:

答案 0 :(得分:8)

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

希望这会有所帮助

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

行为:当用户将drag me拖至floor时,如果您将其拖至other它将允许其他B - )

解释

JQuery代码

//将Floor Div视为可投放

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

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

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

//最后告诉拖拽他们的Droppable属性

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