Disable draggables upon drop

Question

I'm using the interactjs library and have the following draggable boxes and 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>

I'm trying to implement such that when one box is dragged to the drop zone (for eg. Grass, all draggables with id obj and act are greyed out and disabled(not draggable); allowing the user to select ONLY from draggables with id env. Any ideas?

Answer 1

Use the config {accept: '.yes-drop'} in conjunction ondropactivate function to remove the class from the others -

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