在拖放时禁用拖放

Question

我正在使用互作库，并具有以下可拖动的框和下拉区域：

<div id="obj" class="draggable drag-drop"> Grass </div>
<div id="obj" class="draggable drag-drop"> Tree </div>
<div id="act" class="draggable drag-drop"> Fire </div>
<div id="act" class="draggable drag-drop"> Collapsed </div>
<div id="env" class="draggable drag-drop"> Forest </div>
<div id="env" class="draggable drag-drop"> Urban </div>


<div id="dropzone" class="dropzone">dropzonecategory</div>

我正在努力实现这样的情况，当一个盒子被拖到空投区时。Grass，所有带有id obj和act的拖放对象都是灰色的和禁用的(不可拖的)；允许用户只从id env可拖的可拖文件中进行选择。有什么想法吗？

Answer 1

使用配置{accept：‘..yes drop’}在联合ondropactivate函数中从其他类中删除该类-

<div id="obj" class="can-drop draggable drag-drop"> Grass </div>
<div id="obj" class="can-drop draggable drag-drop"> Tree </div>
<div id="act" class="can-drop draggable drag-drop"> Fire </div>
<div id="act" class="can-drop draggable drag-drop"> Collapsed </div>
<div id="env" class="can-drop draggable drag-drop"> Forest </div>
<div id="env" class="can-drop draggable drag-drop"> Urban </div>

..。

interact('.dropzone').dropzone({
   accept: '.can-drop'
}

..。

ondropactivate: function (event) {
    var others = document.querySelectorAll('div:not([#' + event.relatedTarget.id + ']')
    //foreach over these and remove their .can-drop classes
    [].forEach.call(others , function(div) {
      div.classList.remove("can-drop");
    });
}