10+ jQuery Plugins For Making DOM Elements Draggable

If you are looking for solution to make DOM elements draggable or moveable then here are 10+ jQuery plugins to accomplish this task.

jquery.pep.js

jquery.pep.js is a lightweight jQuery plugin which turns any DOM element into a draggable object. It works across mostly all browsers, from old to new, from touch to click.

jquery-pep-1

Gridster

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better.

gridster-2

jQuery UI

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

jquery-ui-3

Infinite Drag

Infinite Drag is a jQuery plugin that helps you create an infinite wall interface. As you drag the wall in a viewport, previously occluded tiles are created. You can hook onto events to generate custom tiles.

infinite-drag-4

jquery.udraggable.js

This plugin is much simpler and therefore much less capable than jQueryUI’s draggable widget. It aims to provide a minimum useful subset rather than attempting to clone the full range of behaviours supported by jQueryUI. However some of the limitations can be worked around quite simply.

jquery-drag-5

Draggable Background

A jQuery plugin to make background images draggable.

Draggable-background-6

jquery.event.drag

The plugin works by using standard DOM events, and simulating custom events to create a drag interaction. It simplifies a recurring pattern of event interaction that can be fairly complex to design in a consistent, cross-browser manner. The drag interaction, while simple in most basic form, gets quite complex when introduced with issues of distance, handles, text selection, proxy elements, click suppression, and dropping.

jquery.event.drag-7

Draggable Image Boxes Grid

The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.

draggable-image-8

dragend JS

dragend.js is a touch ready, full responsive, content swipe script. It has no dependencies but you can use hammer.js for crossbrowser support of touch gestures. It also can, but don’t has to, used as a jQuery plugin.

dragend-9

Nestable jQuery Plugin

Nestable is an interactive hierarchical list. You can drag and drop to rearrange the order. It even works well on touch-screens. If you’re familiar with the way WordPress allows the user to manage menus, this will be used for a similar UI.

nestable-jquery-10

1 Comments

  1. pixelbeatsays:

    Great list! I think it misses Packery from David DeSandro.

    http://packery.metafizzy.co/

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.