Question

我正在使用tolerance: "fit"作为我的droppable div，它完美无缺。只有当可拖动对象适合可放置的div时，它才会掉落。

$('#drag').draggable({ revert: "invalid"});
    $('#drop').droppable({ tolerance: "fit" });

我想要的是，如果用户删除了不适合droppable的可拖动div，我想提醒一条消息，说“请在容器中删除对象”。知道怎么做吗？我对此一无所知。

Small Demo

Answer 1

这可能不是一个很好的解决方案，但你可以使用它。

应该使用stop使用Element.getBoundingClientRect()进行回调，您可以执行以下操作：

$('#drag').draggable({
  revert: "invalid",
  stop: function(event, ui) {
    var drop = $("#drop")[0].getBoundingClientRect();
    var drag = ui.position;
    var bool = drag.top >= drop.top && 
               drag.left >= drop.left && 
               ui.helper.width() <= drop.width && 
               ui.helper.height() <= drop.height;
    console.log("drag", ui, "drop", drop);
    if (!bool) {
      $('pre').append('Please drop object within the Container.<br>');
    }
  }
});
$('#drop').droppable({
  tolerance: "fit"
});

#drag {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: red;
}
#drop {
  width: 300px;
  height: 300px;
  margin: 5px;
  margin-top: 10px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<pre></pre>
<div id="drag">
</div>
<div id="drop">
</div>

Answer 2

我所做的只是使用window变量。这是在start:的{{1}}期间设置的。如果删除，我将更改draggable window中的drop:变量值，然后检查变量是否已更改，这意味着它已被删除。

简单而甜蜜。你对它的看法

如果不满足公差条件，则发出警报

2 个答案: