如何在自定义形状（JavaScript、jQuery UI 或 Interact JS）中拖放？

Question

我尝试从列表中拖动并放入交叉圆圈内，下图相同：

但是当我触摸 div 时它会掉到圆圈外，我尝试使用 CSS（边界半径、溢出、剪辑路径）但没有任何效果。

您可以在此图像中看到列表落在圆圈外但在 div 内。

Answer 1

为此，您需要碰撞检测。您将需要确定点是否在圆内。

可以在这里看到一个例子：http://www.jeffreythompson.org/collision-detection/point-circle.php

Why do we need this? We can use the Pythagorean Theorem to get the distance between two objects in 2D space! In this context, a and b are the horizontal and vertical distances between the point and the center of the circle.

我在这里使用了演示：https://jqueryui.com/droppable/我创建了这个例子。

$(function() {
  function getCenter(el) {
    return {
      x: $(el).position().left + ($(el).width() / 2),
      y: $(el).position().top + ($(el).height() / 2)
    }
  }

  function getPoints(el) {
    return [{
      x: $(el).position().left,
      y: $(el).position().top
    }, {
      x: $(el).position().left + $(el).width(),
      y: $(el).position().top
    }, {
      x: $(el).position().left,
      y: $(el).position().top + $(el).height()
    }, {
      x: $(el).position().left + $(el).width(),
      y: $(el).position().top + $(el).height()
    }];
  }

  function pointInsideCircle(pObj, cObj) {
    var distX = pObj.x - cObj.x;
    var distY = pObj.y - cObj.y;
    var distance = Math.sqrt((distX * distX) + (distY * distY));
    if (distance <= cObj.r) {
      return true;
    }
    return false;
  }

  $("#draggable").draggable({
    revert: "invalid"
  });

  $("#droppable").droppable({
    accept: function(el) {
      var points = getPoints(el);
      var circ = getCenter(this);
      circ['r'] = $(this).width() / 2;
      return pointInsideCircle(points[0], circ);
    },
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    }
  });
});

#draggable {
  width: 100px;
  padding: 0.2em;
  float: left;
  margin: 10px 10px 10px 0;
  text-align: center;
}

#droppable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
  border-width: 2px;
  border-radius: 50%;
  text-align: center;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content">
  <p>Drag me</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

在此示例中，它仅使用拖动元素的左上角点进行检测。您可以测试每个角，如果有角在里面，return 为真。这类似于 touch 类型的检测。

如果左上角不在圆圈内，Drop 将不会接受它。

如何在自定义形状（JavaScript、jQuery UI 或 Interact JS）中拖放？

How Can You Drag and Drop Inside Custom Shapes (JavaScript, jQuery UI or Interact JS)?

html

javascript

css

jquery

jquery-ui