interact.js README

The project's README from github.com/taye/interact.js. As one markdown file: README.md.

interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+).

Gitter jsDelivr Build Status

Features include:

Installation

Typescript definitions

The project is written in Typescript and the npm package includes the type definitions, but if you need the typings alone, you can install them with:

npm install --save-dev @interactjs/types

Documentation

http://interactjs.io/docs

Example

var pixelSize = 16;

interact('.rainbow-pixel-canvas')
  .origin('self')
  .draggable({
    modifiers: [
      interact.modifiers.snap({
        // snap to the corners of a grid
        targets: [
          interact.snappers.grid({ x: pixelSize, y: pixelSize }),
        ],
      })
    ],
    listeners: {
      // draw colored squares on move
      move: function (event) {
        var context = event.target.getContext('2d'),
            // calculate the angle of the drag direction
            dragAngle = 180 * Math.atan2(event.dx, event.dy) / Math.PI;

        // set color based on drag angle and speed
        context.fillStyle = 'hsl(' + dragAngle + ', 86%, '
                            + (30 + Math.min(event.speed / 1000, 1) * 50) + '%)';

        // draw squares
        context.fillRect(event.pageX - pixelSize / 2, event.pageY - pixelSize / 2,
                         pixelSize, pixelSize);
      }
    }
  })
  // clear the canvas on doubletap
  .on('doubletap', function (event) {
    var context = event.target.getContext('2d');

    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  });

  function resizeCanvases () {
    [].forEach.call(document.querySelectorAll('.rainbow-pixel-canvas'), function (canvas) {
      canvas.width = document.body.clientWidth;
      canvas.height = window.innerHeight * 0.7;
    });
  }

  // interact.js can also add DOM event listeners
  interact(document).on('DOMContentLoaded', resizeCanvases);
  interact(window).on('resize', resizeCanvases);

See the above code in action at https://codepen.io/taye/pen/tCKAm

License

interact.js is released under the MIT License.

interact.js (taye/interact.js)

Searching Database…

12.9K ·GitHub
Interact.js
Что это такое?interact.js — это JavaScript-библиотека, которая добавляет веб-элементам перетаскивание, изменение размера и поддержку жестов с несколькими касаниями, а также встроенные эффекты инерции и привязки.
Это фреймворк или библиотека?Это самостоятельная библиотека, а не фреймворк: она не трогает DOM, если не считать необязательного изменения курсора, и работает вместе с любым другим кодом или фреймворком.
Как подключить её к проекту?Установите через npm командой 'npm install interactjs' или загрузите с CDN jsDelivr или unpkg; есть также вариант через гем Rails 5.1+ (yarn add interactjs и строка require) и зависимость Webjars для SBT/Play 2.
Нужен ли мне TypeScript, чтобы ею пользоваться?Нет. Она написана на TypeScript и поставляется с описаниями типов в npm-пакете, но вы можете установить типы отдельно, если они нужны только для обычного JS-проекта.
Работает ли она в старых браузерах, например в IE?Да, поддерживается даже IE9 и новее, а также современные десктопные и мобильные версии Chrome, Firefox и Opera.
Работает ли она на сенсорных устройствах и с SVG?Да, она поддерживает несколько касаний и одновременные взаимодействия на разных устройствах, а также может напрямую работать с SVG-элементами.
Что на самом деле делают инерция и привязка?Инерция позволяет перетаскиваемым или изменяемым элементам ещё некоторое время двигаться после отпускания, как это делал бы физический предмет, а привязка во время взаимодействия фиксирует элементы на сетке или в определённых точках.
Можно ли одновременно запускать несколько перетаскиваний и изменений размера на странице?Да, поддерживаются несколько касаний и одновременные взаимодействия, так что несколько жестов могут обрабатываться в одно и то же время.
Есть ли живой пример, чтобы посмотреть, как это работает?Да, в README есть ссылка на рабочую страницу с примером, где код библиотеки запущен в реальном времени.
What are similar projects?dragula, lenis, headroom.js, slick, filepond, react-sortable-hoc, Sortable, draggable
Which topics is it in?snap, touch, drag-and-drop, responsive, animation, css, browser, mobile, ui, web-development, gui, npm
Creator
taye
Size
29.7 MB
Stars
12.9K
Updated
CommitAug 01
Age
13y
Commits · 90 Days