Jquery 打破可拖动包含的事件

Question

我想添加一个回调，用于当可拖动项打破它的容器时。我有这个功能：

function makeDraggable(){
    $( ".draggable" ).draggable({ containment: "parent" , grid: [ 25, 25 ] });
}

有没有一种不使用碰撞检测的简单方法来实现这一点？如果没有，我将如何进行碰撞检测？

Answer 1

当元素相对于另一个元素的 4 个角掉落时，您可以检查该元素的 4 个角，以查看是否有任何角在该元素内，然后从该点开始执行任何操作。

包含的问题是拖动只能在该包含内完成（您不能将元素拖动到该包含外）。

这是您可以使用的示例（我在 console.log 那里使用

$(function() {
  $("#draggable").draggable({
    stop: function( event, ui ) {
      droppapleBox = $('#droppable-area')[0].getBoundingClientRect()
      draggableBox = ui.helper[0].getBoundingClientRect()
      if (draggableBox.left > droppapleBox.right || draggableBox.right < droppapleBox.left || draggableBox.top > droppapleBox.bottom || draggableBox.bottom < droppapleBox.top) {
        console.log('Element dropped completely outside the drop area');
      } else {
        console.log('Element dropped inside the drop area');
      }
    }
  });
});

body {
  font-family: arial;
  font-size: 12px;
}
.drag-box {
  width: 50px;
  height: 50px;
}

.drop-box {
  width: 150px;
  height: 150px;
  margin-left: 70px;
  margin-top: 70px;
  margin-bottom: 250px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<body>
 
<div id="droppable-area" class="drop-box ui-widget-header">
  <p>Drop me here</p>
  <div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>

Jquery 打破可拖动包含的事件

Jquery event for breaking draggable containment

jquery

collision-detection

draggable