interact.js | JavaScript drag and drop , resizing and multi-touch gestures | Widget library

by taye TypeScript Version: v1.10.17 License: MIT

X-Ray Key Features Code Snippets(1)Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | interact.js Summary

interact.js is a TypeScript library typically used in User Interface, Widget, jQuery applications. interact.js has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

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

Support

Quality

Security

License

Reuse

Support

interact.js has a medium active ecosystem.

It has 11554 star(s) with 764 fork(s). There are 188 watchers for this library.

It had no major release in the last 6 months.

There are 54 open issues and 804 have been closed. On average issues are closed in 114 days. There are 5 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of interact.js is v1.10.17

Quality

interact.js has no bugs reported.

Security

interact.js has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

License

interact.js is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

interact.js releases are not available. You will need to build from source code and install.

Installation instructions, examples and code snippets are available.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of interact.js

Get all kandi verified functions for this library.

interact.js Key Features

No Key Features are available at this moment for interact.js.

interact.js Examples and Code Snippets

Integrating Interact.js with an Angular Project

JavaScript

Lines of Code : 4

License : Strong Copyleft (CC BY-SA 4.0)

Copy

npm install interactjs

import * as interact from 'interactjs';

Community Discussions

Trending Discussions on interact.js

SyntaxError: The requested module 'sqlite' does not provide an export named 'default'

Having issue's on image position after user selects reset

Interact.js - dragging single div "jumping around" in Ember

Is there any handler to rotate an object?

Can't drag and drop to another div using interact.js

How to set the property of an object from an onmove event inside said object?

Resizing with snap in interact.js

Making interact.js resizable pixel perfect

interact.js SVG rect snapping to a div with margins

Importing interactjs 1.7.2 in Angular 8 not working

QUESTION

SyntaxError: The requested module 'sqlite' does not provide an export named 'default'

Asked 2021-May-04 at 15:07

i am having trouble when trying to import sqlite, I add the following line:

...

ANSWER

Answered 2021-May-04 at 15:07

With ESM modules, there are two ways to export functionnalities: either as default exports, or as named exports. The way you import these functionnalities depends on how they are actually exported in the first place.

Source https://stackoverflow.com/questions/67386024

QUESTION

Having issue's on image position after user selects reset

Asked 2021-Mar-20 at 03:55

I have some image assets (folders in this example), where I can drag around and then use the "reset" button to essentially clean them up. However, after you reset the positions and try to drag again, it takes you all the way back to where you dragged it previously? Odd right??? Any help is greatly appreciated!

Again, looking to just solve for:

Let the user drag a folder/image
Let the user reset/clean-up
Let the user drag again, but starting from "reset"

...

ANSWER

Answered 2021-Mar-20 at 03:55

You have the data-x/data-y attribute still attached to the draggable even after reset. Try removing that and it should work fine. I'm quite not sure why you need setTimeout to remove the style attribute though. I have added an extra statement to remove data-x and data-y. Maybe you can clean that up to a single statement

Source https://stackoverflow.com/questions/66717732

QUESTION

Interact.js - dragging single div "jumping around" in Ember

Asked 2020-Dec-11 at 01:55

I'm using Ember, and I'm trying to setup a simple draggable div example using the interact.js library but I'm having some issues.

I'm aware that the library DOES NOT modify the DOM and you need to do that yourself which is fine. I'm following the example on the website but I translating it to Ember:

https://interactjs.io/docs/draggable

Here's what I've done:

Step #1: Create an Ember template with a simple DIV

...

ANSWER

Answered 2020-Dec-11 at 01:55

After some experimentation with this Ember Twiddle: https://ember-twiddle.com/b9adfc02c351f881b05c7032d18812e7?openFiles=controllers.application%5C.js%2C

I found that removing origin: 'self' from the call to draggable fixed the jumping around. I don't know why.

Source https://stackoverflow.com/questions/65192887

QUESTION

Is there any handler to rotate an object?

Asked 2020-Nov-01 at 08:25

This seems to be possible in the mobile version of interact.js while I am looking for a solution that works also in standard desktop browser.

...

ANSWER

Answered 2020-Nov-01 at 08:25

I've found one solution on this Blog by bhch

Here is the code:

Source https://stackoverflow.com/questions/64629893

QUESTION

Can't drag and drop to another div using interact.js

Asked 2020-Sep-03 at 08:50

Html/css newbie here,

I am using interact.js to attain a certain UI where I can drop items from a list into a drop zone. The problem is my list can grow very long and I need to add scroll to the list, and when I try to do so I have create a 'div' and put the list items into it to show the scroll behaviour.

But when I put the list items inside a div and the drop zone outside it, the items do not get dropped there and the list shows a weird behaviour, all of them starts getting stacked on top of the bottom list item (at the bottom of the div containing the items).

This is my html:

...

ANSWER

Answered 2020-Sep-02 at 15:58

You need to change accept: '#rigstodrop' to accept: '#itemstodrop' because here your div has id itemstodrop which you need to drag and drop . Also , use restriction: '.items' to restrict rect not to go beyond that area .

Demo code :

Source https://stackoverflow.com/questions/63698667

QUESTION

How to set the property of an object from an onmove event inside said object?

Asked 2020-Jun-09 at 15:03

I am creating an object that itself creates an object with some events associated. When the event is fired I'd like to change an attribute of the top object.

Here is a MWE of the problem I'm dealing with interact.js:

...

ANSWER

Answered 2020-Jun-09 at 14:53

You can bind this like this:

Source https://stackoverflow.com/questions/62285201

QUESTION

Resizing with snap in interact.js

Asked 2020-Apr-03 at 14:06

In this jsFiddle I have an interact.js rect that can be resized with a snap of 10px by 10px. The rect is positioned in x = 95px, and when I move the left side to the left, it moves to x = 90x. This is fine, however the right side also moves to the right and it shouldn't.

What's wrong with this code? The rect has handles, is that creating the problem?

...

ANSWER

Answered 2020-Apr-03 at 14:06

Ahh, I see the problem. Here's what's happening: when the rectangle is resized, you're rounding both the size and the position. This has the following effect that:

You have a rect whose sides go from x = 95 to x = 115. It has its left side moved by -3 units. It is now 92 to 115.
You check the width: it is 115 - 92 = 23 units across, so you round to the nearest ten: 20 units.
You check the position: It is on 92, so you move it to 90. This slides the entire, now resized, rectangle over.

You'll need to handle the top and left cases differently from the right and bottom cases, since the former two update the rectangles position on top of its size. On top of that, you'll have to only round the respective side that was changed: you don't want to round the bottom when you move the right.

For left or top...
- Move the x or y to the new position, rounded
- Don't round width or height, since that will move right or bottom
For right or bottom...
- Do nothing to x or y, since rounding them will budge the whole rectangle over
- Well, we can still change x or y, since they'll be zero, but we can't round them!
- Only change the width or hight, but round this time

That's quite a few cases to check for, but by using a function, this isn't too hard to see how it all works:

Source https://stackoverflow.com/questions/61010102

QUESTION

Making interact.js resizable pixel perfect

Asked 2020-Apr-01 at 15:13

In this jsFiddle I have an SVG rect that is resizable using interact.js. There's also a 10px by 10px grid and the .resizable function has included a 10px by 10 px snap. The objective is to resize the rect and have the edges snap exactly on the grid.

In most cases it works fine, but many times it is not, as you can see in the picture below. Maybe an adjustment needs to be done manually on resizeend ? How to fix this problem?

...

ANSWER

Answered 2020-Apr-01 at 15:13

As Erik said:

With this target.setAttribute(attr/a, Math.round(v/10)*10) it seems to work:

Source https://stackoverflow.com/questions/60973085

QUESTION

interact.js SVG rect snapping to a div with margins

Asked 2020-Mar-20 at 01:19

In this jsFiddle I have an SVG interact.js rect that when resized it snaps to a grid.

This works fine until I start changing margins from zero to a number. The rect is inside a div #mysvg and if I change the margins of the div, the rect snaps incorrectly (there's a shift).

Try changing in the CSS the margins from:

...

ANSWER

Answered 2020-Mar-20 at 01:19

There is an offset property in interact.snappers.grid which you can use to offset the grid snap:

Source https://stackoverflow.com/questions/60728459

QUESTION

Importing interactjs 1.7.2 in Angular 8 not working

Asked 2020-Mar-06 at 11:16

I'm trying to import interactive.js 1.7.2 in Angular 8. I installed as follows:

...

ANSWER

Answered 2019-Dec-15 at 16:20


import interact from 'interactjs'

interact('.item').draggable({
  onmove(event) {
    console.log(event.pageX,
                event.pageY)
  }
})

Source https://stackoverflow.com/questions/59345676

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install interact.js

npm: npm install interactjs
jsDelivr CDN: <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
unpkg CDN: <script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
Rails 5.1+: yarn add interactjs //= require interactjs/interact
Webjars SBT/Play 2: libraryDependencies ++= Seq("org.webjars.npm" % "interactjs" % version)

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: