Drag’n’Drop Module

This is the standard drag-and-drop library for RightJS. As most of libraries of this type it contains basically two units Draggable and Droppable. There are two separated documents for each of them, plus you might take a look at some simple demo page


top ↑Download

top ↑Auto-Initialization Feature

This library provides the standard for RightJS auto-initialization feature using by the 'rel' attribute, and also the HTML5 style option attributes like this:

<div rel="draggable" data-draggable="{revert: false}">Drag Me To Hell</div>

<div rel="droppable" data-droppable="{accept: '.sinner'}">The Hell</div>

top ↑Element Level Methods

There are also several Element level shortcut methods to covert elements into draggable/droppable units.

makeDraggable([options])makes the element draggable
undoDraggable()undoes the draggable conversion
makeDroppable([options])makes the element droppable
undoDroppable()undoes the droppable conversion

top ↑Performance Notes

In our implementation, the number of draggable elements on your page will not affect your application performance, all of them will be handled in the same way for the same cost.

But, the performance is depend on the number of your droppable targets. In this case there is a difference between usual droppables and droppables with the overlap option turned on. In the first case you might pretty much safely have 100 and more droppables (depends on the complexity of your page), but in case if you need to track the actual draggable and droppable elements overlapping, the number of them might drop down two three times (depending on the browser).