javascript Jquery拖动恢复到特定的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10842623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery drag revert on drop to specific div
提问by Andrew
I currently have a layout that uses Jquery UI Drag and Drop.. I have seen the code on the Jquery website for reverting but I am not sure how I would go about detecting if a div has been dropped on a certain div and if it has been then to revert it.
我目前有一个使用 Jquery UI 拖放的布局..我在 Jquery 网站上看到了用于恢复的代码，但我不确定如何检测某个 div 是否已被放置在某个 div 上，以及它是否有一直然后恢复它。
Basically I have 2 divs and I only want the drag/drop to be able to drop inside one, if it doesn't get dropped in the right one then it is reverted :)
基本上我有 2 个 div，我只希望拖/放能够放到一个里面，如果它没有放到正确的一个，那么它就会被还原:)
Script:
脚本：
<script type="text/javascript">
function shift(parent){
$("#"+parent).draggable({ handle: ".item", accept: "#floor", containment: "#floor", scroll: false, stack:"#floor div" });
}
</script>
Draggable:
可拖动：
<div id="drag" class="ui-widget-content" onmousedown="shift('example')"> </div>
DIVs
DIV
<div id="container">
<div id="floor"> </div>
<div id="other"> </div>
</div>
The draggable is within the container but I only want it to be dropped within floor and not other.
可拖动对象在容器内，但我只希望将其放在地板内而不是其他地方。
Any help would be much appreciated
任何帮助将非常感激
Thank you all in advance!
谢谢大家！
回答by Tats_innit
Hiya Andrew Working Demohttp://jsfiddle.net/BYsnc/
Hiya Andrew工作演示http://jsfiddle.net/BYsnc/
Hope this will help
希望这会有所帮助
Good read: http://docs.jquery.com/UI/Draggable
好读：http: //docs.jquery.com/UI/Draggable
Behaviour: When user drag drag meto floorit will allow else if you drag it to otherit wont B-)
行为：当用户拖动drag me到floor它时将允许其他，如果你将它拖动到other它不会 B-)
Explanation
解释
JQuery Code
查询代码
// Make Floor Div as droppable
// 使 Floor Div 可放置
$('#floor').droppable({
tolerance: 'fit'
});
// Now make drag div as draggable
// 现在使拖动 div 可拖动
$('#drag').draggable({
revert: 'invalid',
stop: function(){
$(this).draggable('option','revert','invalid');
}
});
// Finally tell drag that about their Droppable property
// 最后告诉拖动关于他们的 Droppable 属性
$('#drag').droppable({
greedy: true,
tolerance: 'touch',
drop: function(event,ui){
ui.draggable.draggable('option','revert',true);
}
});
?
