禁用拖放

Question

我正在使用 interactjs 库并具有以下可拖动框和放置区：

<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>

我正在尝试实现，当一个盒子被拖到拖放区时（例如，草地，所有带有 id obj 和 act 的可拖拽对象都变灰并被禁用（不可拖拽）；允许用户 select 仅来自具有 id env 的可拖动对象。有什么想法吗？

Answer 1

使用配置 {accept: '.yes-drop'} 结合 ondropactivate 功能从其他人中删除 class -

<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");
    });
}

禁用拖放

Disable draggables upon drop

javascript

css

twitter-bootstrap

interact.js