jQuery Plugin To Create Draggable Table Data - tableDragAndDrop

tableDragAndDrop is a jQuery plugin which allows you to make table rows / columns draggable and droppable via left or right mouse click. Without the need of jQuery UI library for draggable functionality.

How to use it:

1. Include the jQuery tableDragAndDrop plugin after you have jQuery library installed in the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="lib/tabledragdrop.js"></script>

2. Call the plugin on the target table.

$('#target').tabledragdrop({"selector": "#target"});

3. You can use the CSS class noDrag to disable the drag'n'drop functionality on specified table rows or columns.

<th class="noDrag">fixed col</th>
<th class="noDrag">Fixed row</th>

4. Style the drag'n'drop handler.

table th { cursor: pointer; }

table th.noDrag { cursor: not-allowed; }

.drag_freeze { 
  background: #bbb;
  color: #888;
}

.ghost { 
  background: #cdfff8;
  position: absolute;
  z-index: 10000;
}

.arrow_down {
  display: block;
  position: absolute;
  z-index: 10000;
  width: 16px;
  height: 16px;
  background: url('arrow-down.png') no-repeat bottom center;
}

.arrow_right {
  display: block;
  position: absolute;
  z-index: 10000;
  width: 16px;
  height: 16px;
  background: url('arrow-right.png') no-repeat center right;
}

---

This awesome jQuery plugin is developed by m00nk. For more Advanced Usages, please check the demo page or visit the official website.