interact.js Javascript Library

Previously we've discussed enabling the drag and drop functionalities using the jsPlumb library. Recently, I stumbled upon the interact.js Javascript library, which I found to be as user-friendly as jsPlumb.

Below is a short comparison of the two.  

 Library License Language/Infrastructure Level Built-in editor Github


HTML, JavaScript Medium Not Present 2931 stars, 755 forks

Standalone JavaScript


Not Present

5452 stars, 351 forks

The above details are not presented here to render either one as the bet over the other. 

But, in my own experience, I've blended both in my projects utilizing the drag and drop functions for some elements from jsPLumb and the drag and resize function for one element from inter.js. But the only concern when using both the libraries within one function, issues related to the drag function of jsPlumb and interact.js overriding each other bringing out an unintentional effect, needs to be handled. I my case, I removed the jsPlumb's draggable enforced on the element considered in that context and enabled the interact.js's draggable only for this particular instance. 

Here's an example of how I've included interact.js in implementing the drag, drop and resize functionalities.

draggable Function


resizable Function

Here, ".partitiondrop" is the class of the element that I need the preceding function to be enforced on. Most of the explanations are provided within the code itself in the form of comments.

For further information regarding the interact.js library , you can refer here.


Popular posts from this blog

jsPlumb - Dragging a Clone

jsPlumb - Drag and Drop Multiple Elements

Creating connections between Elements in jsPlumb