InteractJS: A Powerful Library for Web Developers
InteractJS is a versatile JavaScript library that allows developers to interact with HTML elements in a variety of ways such as drag-and-drop, resizing, multi-touch, and more.
Drag and Drop
Enable drag-and-drop functionality with ease using InteractJS:
interact('.draggable')
.draggable({
inertia: true,
onmove: dragMoveListener,
});
function dragMoveListener(event) {
var target = event.target;
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
Resizing Elements
Make any element resizable:
interact('.resizable')
.resizable({
edges: { left: true, right: true, bottom: true, top: true },
})
.on('resizemove', function (event) {
var target = event.target;
var x = (parseFloat(target.getAttribute('data-x')) || 0);
var y = (parseFloat(target.getAttribute('data-y')) || 0);
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
});
Rotating Elements
Enable element rotation easily:
interact('.rotatable')
.gesturable({
onmove: function (event) {
var target = event.target;
var angle = (parseFloat(target.getAttribute('data-angle')) || 0) + event.da;
target.style.transform = 'rotate(' + angle + 'deg)';
target.setAttribute('data-angle', angle);
}
});
Multi-Touch Gestures
Implement multi-touch gestures like pinch-to-zoom:
interact('.pinchable')
.gesturable({
onmove: function (event) {
var target = event.target;
var scale = (parseFloat(target.getAttribute('data-scale')) || 1) * (1 + event.ds);
target.style.transform = 'scale(' + scale + ')';
target.setAttribute('data-scale', scale);
}
});
Snap to Grid
Snap draggable elements to a grid for more control:
interact('.draggable')
.draggable({
modifiers: [
interact.modifiers.snap({
targets: [
interact.snappers.grid({ x: 30, y: 30 })
],
range: Infinity,
relativePoints: [{ x: 0.5, y: 0.5 }]
})
],
onmove: dragMoveListener
});
App Example: Task Management Board
Here is an example of an app using the introduced APIs to create a task management board with drag-and-drop functionality:
<!DOCTYPE html>
<html>
<head>
<title>Task Management Board</title>
<script src="https://cdn.jsdelivr.net/npm/@interactjs/interactjs/dist/interact.min.js"></script>
<style>
.task {width: 100px; height: 100px; border: 1px solid #000;}
.column {width: 120px; float: left;}
</style>
</head>
<body>
<div class="column" id="todo">To Do</div>
<div class="column" id="doing">Doing</div>
<div class="column" id="done">Done</div>
<div class="task draggable" data-x="0" data-y="0">Task 1</div>
<script>
interact('.draggable').draggable({
inertia: true,
onmove: function (event) {
var target = event.target;
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
});
</script>
</body>
</html>
Hash: 3010b072eba3670bc98b2d3864cd2b7151c69a112a1263bb2321dda2576f7163
