Steve Fenton

Jquery Drag And Drop Sort

Quick Links

Visit the jQuery Drag And Drop Sort project hub, which has a demonstration and download for this plugin on JS Plugins JavaScript Plugin Library.

Drag And Drop Sort Demonstration.

Description

The jQuery Drag And Drop Sort project is a plugin for the jQuery JavaScript Framework, which can apply drag and drop re-ordering on any collection of elements. It can work on a table, a list or even a collection of paragraphs.

If you find my open source projects and jQuery plugins useful,
please consider making a donation!

Requirements

• jquery.js
• jquery.draganddropsort.js

CSS

/* Recommended styles */
		
		ul .ddsinsert {
			border-top: 3px solid Green;
		}
		
		tbody .ddsinsert td {
			border-top: 3px solid Green;
		}
		
		div > .ddsinsert {
			border-top: 3px solid Green;
		}
		
		.ddsitem {
			cursor: crosshair;
		}
		
		.ddsmoving {
			color: Orange;
		}
		
		/* Optional styles */
		
		table {
			width: 300px;
			border: 1px solid Gray;
			border-collapse: collapse;
		}
		
		td {
			border: 1px solid Gray;
		}

JavaScript

$("#example").draganddropsort();

With all options set:

$("#example").draganddropsort({
    "classmodifier": "dds",
    "appendlastline": true
});

You Are Here: Home » JavaScript » Jquery Drag And Drop Sort