Interact.js: Conditionally Toggle Resizability/Snapping based on In/Out of Dropzone?

[w3bappd3v]

Thanks Taye for a great Drag/Drop/Resize library!

Could use some advise if you can spare:

Need a clean way to stay at drop position if in eligible dropzone else snap back to startPos...basically toggle snap on/off based on whether or not in/out of dropzone.

My first instinct was to do event.interactable.snap(false); on "dragEnter" but snap function is only on draggable event not dropzone, feel like I'm approaching things wrong here?

Also need toggling resizablity when in/out of dropzones....maybe similar technically?

Much obliged.

[taye]

For the snapping, I think the best way is to call in the dragenter and dragleave listener functions:

event.draggable.draggable({
  snap: {
    targets: [ /* empty for dragenter; startPos for dragleave */ ]
  }
})

event.draggable is the Interactable that's being dragged.

To enable/disable resizing, you can add a dropped class or attribute to the draggable when it's dropped and use a custom actionChecker to check if resizing should be allowed based on whether or not the target element has the dropped class/attribute.

[aminta]

Hi! For startPos, maybe the simplest solution is (ondragend event of the draggable):

 function revertBack(event) {
       var target = event.target;
       target.style.webkitTransform =
       target.style.transform =
       'translate(0px, 0px)';

       target.setAttribute('data-x', 0);
       target.setAttribute('data-y', 0);
 }

[gvadl]

Hi w3bappd3v,

Could you please post a working code for drag, drop with snapping. I am also facing the same problem.

I am having multiple drop zone, but all the drag-gable items are automatically dropped into one element when i am dropping.

Regards
Gunasundari

[ImDivyabarathi]

var item;
document.addEventListener('dragstart', function (e) {
    item = e.target;
    // e.dataTransfer.setData('text', '');

}, false);
document.addEventListener('dragover', function (e) {
    if (item) {
        e.preventDefault();
    }

}, false);
document.addEventListener('drop', function (e) {
    if (e.target.getAttribute('data-draggable') == 'target') {
        e.target.appendChild(item);
        e.preventDefault();
    }

}, false);