Tìm hiểu về thư viện interactjs
Bài đăng này đã không được cập nhật trong 3 năm
I. Giới thiệu về Interact.js
1. Interact.js là gì ?
Interact.js là một thư viện JavaScript hỗ trợ cho việc drag, drop, resize, snap và nhiều hơn thế nữa. Interact.js được phát triển bởi Taye Adeyemi khi ông bắt đầu dự án GSoC 2012 (Google Summer of Code). Sản phẩm của dự án này là một ứng dụng web sử dụng jQuery UI để drag, drop và resizing SVG element. Tuy nhiên jQuery UI có rất ít hỗ trợ cho SVG chính vì vậy mà interact.js đã được ra đời để thay thế jQuery UI trong dự án này.
2. Tính năng vượt trội của interactjs
- Hỗ trợ hầu hết các trình duyệt và các thiết bị desktop, mobile, tablet.
- Hỗ trợ làm việc tốt với SVG element.
- Nhẹ nhàng và hoạt động độc lập.
- Không làm thay đổi HTML DOM (ngoại trừ việc hỗ trợ IE8 và thay đổi con trỏ).
II. Cài đặt và sử dụng Interact.js
1. Cài đặt
-
Download interact.js phiên bản mới nhất tại http://interactjs.io/#download hoặc https://github.com/taye/interact.js và nhúng vào ứng dụng thông qua thẻ script.
<script src="/path/to/interact.js"></script>
-
Bower
bower install interact
-
npm
npm install interact.js
-
CDN
<script src="//cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
2. Xây dựng một ứng dụng đơn giản
- Dragging
interact('.draggable')
.draggable({
// enable inertial
inertia: true,
// call function on drap
onmove: dragMoveListener,
// call function on end drap
onend: function(event) {
var textEl = event.target.querySelector('p');
textEl && (textEl.textContent =
'Moved ' + (Math.sqrt(event.dx * event.dx +
event.dy * event.dy) | 0) + 'px');
}
});
function dragMoveListener(event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
Edit code on jsfiddle: https://jsfiddle.net/midi9x/jnbv7qjz/
- Snapping
var element = document.getElementById('grid-snap'),
x = 0, y = 0;
interact(element)
.draggable({
snap: {
targets: [
interact.createSnapGrid({ x: 10, y: 10 })
]
},
inertia: true,
restrict: {
restriction: element.parentNode,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
endOnly: true
}
}).on('dragmove', function (event) {
x += event.dx;
y += event.dy;
event.target.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
event.target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
});
Edit code on jsfiddle: https://jsfiddle.net/midi9x/curt29em/
- Resizing
interact('.resize-drag')
.resizable({
preserveAspectRatio: true,
edges: { left: true, right: true, bottom: true, top: true }
})
.on('resizemove', function (event) {
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
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.webkitTransform = 'translate(' + x + 'px,' + y + 'px)';
target.style.transform = 'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height);
});
Edit code on jsfiddle: https://jsfiddle.net/midi9x/rdLfzeh8/
Hy vọng bài viết này sẽ cung cấp cho các bạn một cái nhìn tổng quan về interact.js. Ngoài các tính năng đã được nêu trên thì interactjs cũng còn rất nhiều các tính năng vượt trội khác.
Tham khảo thêm tại
All rights reserved