Is it possible the “Swap out” draggable items using InteractJS, when dragging a draggable item from a “origin” to a “target” zone?
I cannot find any reference in their Documentation https://interactjs.io/docs about this specific use case
To explain better the situation and goal I made this rough fiddle:
https://jsfiddle.net/09afor6w/
It has 2 draggable “boxes” each in a “parent box”. When dragging the first box to the second, the second should automatically swap locations with the first, instead of staying put, or at least not allow the dragged element to be superposed to the element already there.
I assumed they would have a specific “swap” feature but it does not seem so.
With the “restrict” method, I can only restrict size and area of (size and drag), but not control that no items should overlap and thus maybe use this as a workaround to create a “swap” experience.
The goal behind this is creating a UI where the user can drag and drop single form elements into different places in a restricted, “gridded” area and resize the form elements.
When dragging elements from A to B, the element from the target area should change location to the “origin” area of the dragged item, that’s all.
So if there is an easier, lighter way to do this, I am also happy to hear about.
This is the code I use.
HTML:
<div class="contain-all">
<div class="contain-some">
<div class="grid-snap">
Move this box to the white target area below
</div>
</div>
<div class="contain-some">
<div class="grid-snap">
This box should automatically swap place with the moved box
</div>
</div>
</div>
JS:
var elements = document.getElementsByClassName('grid-snap');
$(elements).each(function(){
var x = 0; var y = 0
interact(this)
.resizable({
// resize from all edges and corners
edges: { left: true, right: true, bottom: true, top: true },
listeners: {
move (event) {
var target = event.target
var x = (parseFloat(target.getAttribute('data-x')) || 0)
var y = (parseFloat(target.getAttribute('data-y')) || 0)
// update the element's style
target.style.width = event.rect.width + 'px'
target.style.height = event.rect.height + 'px'
// translate when resizing from top or left edges
x += event.deltaRect.left
y += event.deltaRect.top
target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
}
},
modifiers: [
// keep the edges inside the parent
interact.modifiers.restrictEdges({
outer: 'parent'
}),
// minimum size
interact.modifiers.restrictSize({
min: { width: 100, height: 50 }
})
],
inertia: true
})
.draggable({
listeners: { move: window.dragMoveListener },
inertia: true,
modifiers: [
interact.modifiers.restrictRect({
restriction: '#formthing',
}),
interact.modifiers.snap({
targets: [
interact.snappers.grid({ x: 30, y: 30 })
],
range: Infinity,
relativePoints: [ { x: 0, y: 0 } ]
}),
]
})
.on('dragmove', function (event) {
x += event.dx
y += event.dy
event.target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
})
});
