Question

我正在使用interactjs库并拥有以下可拖动框和dropzone：

<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的draggables。任何想法？

Answer 1

使用config {accept：'。them-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");
    });
}

掉线时禁用拖动

1 个答案: