如果在此 div 之外和其他可拖动对象内部，则可拖动恢复（使用无效和有效恢复选项）

Posted 2023-05-08

【中文标题】如果在此 div 之外和其他可拖动对象内部，则可拖动恢复（使用无效和有效恢复选项）

【英文标题】：Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)

【发布时间】：2011-08-29 14:36:34

【问题描述】：

在 ui draggables (http://jqueryui.com/demos/droppable/#revert) 上，如果一个 div 在一个 div 内，如果不在另一个 div 内，是否可以恢复它？比如这样的

$( "#draggable" ).draggable( revert: "valid", revert:"invalid" );

但是由于明显的原因，这不起作用..我可以设置条件吗？..因为它在这个 droppable 里面而不是那个 droppable 里面？

【问题讨论】：

“有效”和“无效”的 div 是否以某种方式嵌套？因为否则，它肯定不能同时在两个 div 中...... :)

想象一个大盒子，里面有小盒子。小盒子是可拖动的，如果我把它们带到大盒子外面，它们会被还原，如果我把它们放到另一个小盒子上，它也应该被还原——但这是我不能做的部分。我尝试让所有小盒子成为另一个可放置的，但由于它们也在大盒子内，因此它注册为有效，因此不会发生还原。也试过贪婪，我无法让它工作。

假设 revert 属性可以采用任何选择器，您可以使用类似 revert: ".outside, .valid > div.invalid" 的东西吗？假设包装 'valid' 的元素有一个 outside 类。

实际上它要么是真要么是假（有效或无效），所以我想没有办法那样做。你知道是否有办法从大盒子区域中排除小盒子区域并称之为有效？

啊，恐怕不是...从未真正使用过droppables！ :)

【参考方案1】：

您的想法是正确的，您必须使小盒子成为贪婪的 droppables 并处理它们上的 drop 事件。棘手的部分是取消拖动操作。

默认情况下，您的可拖动对象应以revert:'invalid' 开头。如果它们被拖到大盒子里，你不需要做任何事情，在我的例子中使用tolerance:'fit'，所以小盒子必须完全在里面才能被接受。

我已经用tolerance:'touch' 把小盒子做成了贪婪的droppables，所以如果被拖动的小盒子碰到另一个小盒子，它会调用它上面的drag 处理程序。

要从拖动处理程序取消拖动操作，您可以将拖动的项目设置为revert:true，这会强制它恢复，即使它被放置在一个接受的可放置对象上。为确保您可以再次拖动该小框，在其拖动停止事件中您必须重置 revert:'invalid'。 stop 事件将在每次成功放置时触发，如果它正在还原，它将在还原完成后触发。

您可以在这里试用现场演示：http://jsfiddle.net/htWV3/1/

html：

<div class="drop">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

CSS：

.drop  display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; 

.drag  display:inline-block; width:30px; height:30px; border:1px solid silver; background-color:white; 

javascript：

$('.drop').droppable(
    tolerance: 'fit'
);

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

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

【讨论】：

你真是太棒了！非常感谢！

谢谢。是否可以在可拖动元素上使用helper: 'clone' 以某种方式做到这一点？

@PetrMarek：我不确定您希望它如何工作，如果您希望可拖动对象在有效放置时卡入其克隆位置，您只需添加放置处理程序即可主droppable容器并将ui.draggable的位置设置为ui.position，它被释放的地方。这是一个演示：jsfiddle.net/htWV3/231

您好，很抱歉将其备份，但您如何使用网格布局更好地完成这项工作？例如，我的可拖动对象捕捉到grid: [ 60, 60 ]，但是当它在被放下后恢复时，它不会恢复到网格位置，它总是关闭一点。

首先非常感谢您。我从您的回答中学到了很多东西，该回答与另一个问题相关联，其中接受的答案是使用另一个插件。我要补充一点，当使用网格时，我发现将greedy droppable 的tolerance 设置为fit 效果更好。否则它不会让我掉入触及贪婪droppable的网格点。