不允许使用interact.js将拖放元素拖放到另一个拖放元素上？

Question

我需要不允许拖动元素放置在已放置的另一个元素的顶部，可以使用 interact.js 进行吗？

我的代码是这样的：

HTML：

<div class="col s12 is-height-100vh grey-medium yellow darken-4 top-5" id="containerSellPointTablePlan">
            <div id="drag1" class="draggable_">
                <p>Mesa 1</p>
            </div>
            <div id="drag2" class="draggable_">
                <p>Mesa 2</p>
            </div>
            <div id="drag3" class="draggable_">
                <p>Mesa 3</p>
            </div>
        </div>

JS：

   interact('.draggable_').draggable({
   restrict: {
       restriction: "parent",
       endOnly: false,
       elementRect: { top: 0, left: 0, bottom: 1, right: 1}
   },
    autoScroll: true,
    onmove: dragMoveListener,
    onend: endMoveListener,
    inertia: {
        smoothEndDuration: 200,
        resistance: 30,
        minSpeed: 200,
        endSpeed: 100
    },
    maxPerElement: 2,
    ignoreFrom: 'div'
});
function dragMoveListener (evt) {
    var target = evt.target,
        x = (parseFloat(target.getAttribute("data-x")) || 0) + evt.dx,
        y = (parseFloat(target.getAttribute("data-y")) || 0)  + evt.dy;
    target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
}
function endMoveListener (evt) {
    console.log("DRAG END");
}

window.dragMoveListner = dragMoveListener;

请问好吗？