swapable - jQuery plugin

The jQuery UI Swapable plugin makes selected elements swapable by dragging with the mouse.

Introduction

Enable a group of DOM elements to be swapable. Click on and drag an element to a new spot within the list; drag element and drop one will swap and the other items will not affected. By default, swapable items share sortable properties.

DETAILS

Similar to "Sortable", but only two elements of the selected group are affected: dragged and dropped which are swapped. All other elements stay at their current positions. This plugin is built based on existing "Sortable" jQuery plugin and inherits all sortable options except "cursorAt" one which is hard-coded.

Based on jquery.ui.sortable.js

Depends:

• jquery.ui.core.js
• jquery.ui.mouse.js
• jquery.ui.widget.js
• jquery.ui.sortable.js

To add the feature to a group of elements:

Minimal configuration:

$("#swappable").swappable({items: '.itemClass',cursorAt: {top:-10} });

Option's specific: 

• Always set option "cursorAt: {top: -nn} " as a negative Integer.
• Always set option "items" with items' class name, not element or filter.

Example:

 

  <ul id="foo">

     <li class="bar"><li>

     <li class="bar"><li>

     <li class="bar"><li>

  </ul>

$("#foo").swappable({

   items:'.bar', // Mandatory option, class only.

   cursorAt: {top:-20}, // MUST be set to negative. Default doesn't work!

});

demo    http://www.eslinstructor.net/demo/swappable/swappable_home.html

Download: http://code.google.com/p/jquery-swapable/downloads/list

see also: http://plugins.jquery.com/project/Swapable