jQuery Plugin To Manually Move Table Rows and Columns | tableDragAndDrop

tableDragAndDrop is a jQuery plugin that allows you to make table rows/columns drag and drop by right or left click.

jquery table row drag and drop plugin, jquery drag and drop table cells, jquery draggable table row, drag and drop table cells using jquery, jquery sort table by column value

How to make use of it:

1. Include the jQuery tableDragAndDrop the plugin after installing the jQuery library.

<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 noDrag class to disable the drag and drop functionality on selected table rows or columns.

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

4. Drag and drop wizard style.

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;
}

create draggable table data using jquery, tableDragAndDrop Plugin/Github

See Demo And Download

Official Website(m00nk): Click Here

This superior jQuery/javascript plugin is developed by m00nk. For extra advanced usage, please go to the official website.