interact.js 中文文档（落入区）

落入区是interact.js中一个重要概念，它允许您定义哪些元素可以被拖放，以及它们可以被放置到哪里。落入区可以是一个单独的元素，也可以是一组元素。

要创建一个落入区，您可以使用interact()方法并指定一个CSS选择器或一个元素。例如：

interact('.dropzone');

这将使带有.dropzone类的所有元素成为落入区。

当一个元素被拖动到落入区时，ondrop事件会被触发。此事件的回调函数会收到两个参数：拖动的元素和落入区的元素。

例如：

interact('.dropzone').on('drop', function (event) {
  console.log(event.relatedTarget); // 拖动的元素
  console.log(event.target); // 落入区的元素
});

您还可以使用accept选项来指定哪些元素可以被放入落入区。例如：

interact('.dropzone').accept('.draggable');

这将使只有带有.draggable类的元素才能被放入.dropzone元素中。

使用场景

落入区可以用于各种场景，例如：

• 将文件拖放到文件夹中
• 将项目拖放到看板中
• 将商品拖放到购物车中

API

落入区的API非常简单，它只有两个方法：

• accept(selector)：指定哪些元素可以被放入落入区。
• ondrop(callback)：当一个元素被拖动到落入区时触发回调函数。

实例

以下是一个使用落入区的实例：

<div class="dropzone">
  <div class="draggable">Item 1</div>
  <div class="draggable">Item 2</div>
</div>

interact('.dropzone').accept('.draggable');

interact('.dropzone').ondrop(function (event) {
  console.log(event.relatedTarget); // 拖动的元素
  console.log(event.target); // 落入区的元素
});

在这个实例中，.dropzone元素是一个落入区，.draggable元素可以被拖动到.dropzone元素中。当一个.draggable元素被拖动到.dropzone元素中时，ondrop事件的回调函数会被触发，并在控制台中输出拖动的元素和落入区的元素。