Updated date:

List of jQuery libraries for Drag and Drop

I am the owner of ssiddique.info. for similar posts visit my other articles

Drag and drop is a standard UI element that allows the user to drag an object to a different location. The object can be an image, a box, a layout or any other component.

jQuery Kinetic

jQuery.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers.

List of light weight IDE and text editor

For more information on this plug-in, please refer to http://davetayls.me/jquery.kinetic/

Draggable and Droppable

These are two controls that enable objects to be moved within a layout and drop to the location within a layout.

Draggable functionality needs to be enabled on any DOM element. You can move the draggable object by clicking on it with the mouse and dragging it anywhere within the layout.

Droppable functionality needs to be enabled on any DOM element. You can select the target for draggable elements within the layout.

For more information on these controls, refer to https://jqueryui.com/draggable/


Dragdealer

It is a drag-based UI control that is used as a slider content scroller, image carousel and more. Basically, you can use this control as you desire. Based on your requirements and data, you can decide to use any of the UI features this control provides. It is just a drag component and you use it applying your creativity.

For more information and APIs, please refer to https://skidding.github.io/dragdealer/

DropzoneJS

It is an open source library which is lightweight and highly customizable. It provides drag and drop file uploads with image previews. You need to implement server side code to receive and store the file as it does not provide server side implementation.

For more information, please refer to http://www.dropzonejs.com/

Dragula

Dragula is a javascript library, provides lightweight drag and drop functionality for objects such as images, links or any other nested elements. You can move these elements in the same container, between two containers, remove an element from the container, shuffle the elements, copy an element, sort the elements and may more.

It is very interesting library and can be used as per your requirements. This library is very useful to formulate answers of online tests.

For more information and demo, please refer to http://bevacqua.github.io/dragula/

jquery.pep.js

jquery.pep.js is a jQuery plug-in that turns any DOM element into a draggable object. jQuery’s animate functions along with CSS3 animations is used by this plug-in to bring full-blown kinetic drag that works on all HTML5-ready devices.

For more information on Pep, please refer to http://pep.briangonzalez.org/

interact.js

interact.js is a JavaScript module, used to resize elements and drag and drop elements. It also supports multi-touch gestures with inertia and snapping for modern browsers. There are some very good features of interact.js such as:

  • Useful for more than moving elements around a page.
  • Works well with SVG (Scalable Vector Graphics)
  • Allows the application to supply object dimensions instead of parsing element styles or getting DOMRects.
  • Handles multi-touch input

. Please refer to the link for demos - https://hacks.mozilla.org/2014/11/interact-js-for-drag-and-drop-resizing-and-multi-touch-gestures/

gridster.js

It is a jQuery plug-in that allows creating draggable layouts from elements spanning multiple columns. You can add and remove elements from the grid layout. It’s also called drag-and-drool.
It provides the following features to create the grid layout according to your preferences.

  • It allows you to add widgets dynamically using add_widget method.
  • It provides custom drag handle that restricts dragging from starting unless the mousedown occurs on the specified element(s).
  • It provides expandable widgets that are expanded on mouse hover using the resize_widget method.
  • It allows you to build a new grid from serialized positions using the serialize method.
  • You can use multiple gridster instances on the same page using namespaceconfig option.
  • You can resize widget by grabbing the right or bottom border and draggin to the desired width or height.

There are many more. Please refer to the link for demos for all these features. - http://gridster.net/#demos

Gridster supports Internet Explorer 9+, Firefox, Chrome, Safari and Opera.