落入区可以放入可拖动元素目标，也可以决定什么元素可以放入。和拖动事件一样，放入事件不会调整 DOM 结构改变元素的父级元素。如果您需要，您可以通过事件监听器来实现这个功能。
interact(dropTarget)
.dropzone({
ondrop: function (event) {
alert(event.relatedTarget.id
+ ' was dropped into '
+ event.target.id)
}
})
.on('dropactivate', function (event) {
event.target.classList.add('drop-activated')
})
落入区事件
落入区事件是一个普通对象拥有下面属性：
| 属性 | 藐视 |
|---|---|
target | 落入区的元素 |
dropzone | 落入区可交互对象（Interactable） |
relatedTarget | 正在拖动的元素 |
draggable | 正在拖动的可交互对象（Interactable） |
dragEvent | 相关联的拖动事件 – drag{start,move,end} |
timeStamp | 事件发生的事件 |
type | 事件类型 |
interact('.dropzone').dropzone({
accept: '.drag0, .drag1',
});
accept
落入区的 accept 选项接收 CSS 选择器或元素，被拖动的元素必须匹配该配置以便触发落入事件。
interact(target).dropzone({
overlap: 0.25
});
overlap 选项设置决定落入是怎么控制的。可用值如下：
'pointer'– 鼠标指针必须在落入区上(默认)'center'– 可拖动元素的中心必须在落入区上- 一个 0-1 之间的数值。数值是 (交叉区域) / (拖动总区域)。举个栗子：
0.5的触发条件为拖动元素的一半区域在落入区之上
checker
checker 选项是一个方法，您可以通过该方法设置更多的办法来决定一个可拖动元素能否被放入落入区。
interact(target).dropzone({
checker: function (
dragEvent, // 相关联的 dragmove 或 dragend
event, // 触摸, 指针 或 鼠标事件
dropped, // 布尔值，默认落入结果
dropzone, // 落入区可交互对象（Interactable）
dropzoneElement, // 落入区元素
draggable, // 可拖动交互对象（Interactable）
draggableElement // 可拖动元素
) {
// 只允许落入空的落入区
return dropped && !dropElement.hasChildNodes();
}
});
checker 方法接收如下参数：
| 参数 | 描述 |
|---|---|
dragEvent | 相关联的 dragmove 或 dragend 事件 |
event | 用户输入的移动、向上、向下事件相关联的拖动事件 |
dropped | 默认落入结果 |
dropzone | 落入区可交互对象（Interactable） |
dropElement | 落入区元素 |
draggable | 可拖动交互对象（Interactable） |
draggableElement | 正在拖动的可拖动元素 |
