JQuery UI -如何将包含应用于匹配多个div的选择器？
JQuery UI -如何将包含应用于匹配多个div的选择器？
提问于 2012-01-25 18:14:08
示例：
<div>
<div class='drop'>
<div class='drag'></div>
</div>
<div class='drop'>
</div>
<div class='drop'>
</div>
<div class='drop'>
</div>
<div>
</div>
</div>
$('div.drag').draggable({ containment: 'div.drop' });通常，如果只有一个"div.drop“元素，它会按预期工作。如果有超过1个(如上例所示)，我认为它会被拖放到任何"div.drop“div中。结果是，它只能拖/放到"div.drop“选择器匹配的第一个元素。
有没有解决这个问题的办法(也就是，让它只在"div.drop“div中包含/可放/可拖)？
编辑:我想你们是对的。经过一些反省后，我意识到我没有采用您建议的解决方案，因为在div之间有填充，并且我不希望"div.drag“div掉在填充区域上。
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-01-25 18:28:25
它不是那样工作的！包含是对拖动的约束约束。
你想要拖放。
然后，您必须为div.grag配置拖动：
$('div.drag').draggable();并为div.drop配置drop：
$('div.drop').droppable();您可以使用第一个div级别为您的拖动元素添加容器：
<div id='dragZone'>
<div class='drop'>
<div class='drag'></div>
</div>
<div class='drop'>
</div>
</div>
$('div.drag').draggable({ containment: '#dragZone'});Stack Overflow用户
发布于 2012-01-25 18:36:02
containment将可拖动对象的移动限制在给定元素的范围内。您可以将containment设置为div.drops的父级。
您应该将div.drop设置为可拖放，在拖放时追加可拖放项，并使用revert: 'invalid'选项，以便在可拖放项未被拖放到可放放项的情况下还原可拖放项。
$('div.drop').droppable({drop: function(e, ui) {
ui.draggable.appendTo(this);
}});
$('div.drag').draggable({
helper: 'clone',
revert: 'invalid'
});Stack Overflow用户
发布于 2012-01-25 19:49:09
正如这些人所指出的那样，容器selector并不是这样工作的，因为它将拖动限制在指定元素或区域的范围内。
您可以尝试如下所示：
JQuery参考：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>HTML：
<div id="dragContainer">
<div class='drop'>
<div class='drag'>drag</div>
</div>
<div class='drop'>drop
</div>
<div class='drop'>drop
</div>
<div class='drop'>drop
</div>
<div class='nodrop'>
</div>
</div>JQuery：
<script type="text/javascript">
$('div.drag').draggable({ containment: '#dragContainer', revert: "invalid" });
$('div.drop').droppable( {
drop: handleDropEvent
} );
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
alert( 'Ok to drop here onto me!' );
}
</script> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9000924
复制相关文章
相似问题
腾讯云开发者
