Tìm hiểu về thư viện interactjs

Bài đăng này đã không được cập nhật trong 2 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.