https://github.com/isocra/TableDnD

jQuery plug-in to drag and drop rows in HTML tables
https://github.com/isocra/TableDnD

html javascript jquery-plugin

Last synced: 5 days ago
JSON representation

jQuery plug-in to drag and drop rows in HTML tables

• Host: GitHub
• URL: https://github.com/isocra/TableDnD
• Owner: isocra
• License: other
• Created: 2011-08-31T13:18:42.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2024-10-16T11:04:49.000Z (25 days ago)
• Last Synced: 2024-10-18T22:59:32.796Z (23 days ago)
• Topics: html, javascript, jquery-plugin
• Language: HTML
• Homepage: http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
• Size: 523 KB
• Stars: 401
• Watchers: 32
• Forks: 370
• Open Issues: 41
• Metadata Files:
  • Readme: README.md
  • License: MIT-LICENSE.txt

Awesome Lists containing this project

• awesome-jquery - TableDnD - jQuery plug-in to drag and drop rows in HTML tables (Table of contents / Data Table)

README

        
# TableDnD

[![npm version](https://badge.fury.io/js/tablednd.svg)](https://badge.fury.io/js/tablednd)

[![CDNJS version](https://img.shields.io/cdnjs/v/TableDnD.svg)](https://cdnjs.com/libraries/TableDnD)

[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/gh/isocra/TableDnD/badge?style=rounded)](https://www.jsdelivr.com/package/gh/isocra/TableDnD)

[![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)

## Installation

TableDnD is easy to install:

```

npm install --save tablednd

```

or

```

yarn add tablednd

```

or

```

bower install https://github.com/isocra/TableDnD.git

```

Alternatively you can simply reference from CDNJS:

```html

```

or

```html

```

You'll also need to include [jQuery](https://jquery.com) before you include this plugin (so that jQuery is defined).

---

## Getting Started

Let's create a simple table. The HTML for the table is very straight forward (no Javascript, pure HTML, we haven't added `thead` or `tbody` elements, but it works fine with these too):

```html

    1Onesome text

    2Twosome text

    3Threesome text

    4Foursome text

    5Fivesome text

    6Sixsome text

```

To add in the "draggability" all we need to do is add a line to the `$(document).ready(...)` function as follows:

```html

$(document).ready(function() {

    // Initialise the table

    $("#table-1").tableDnD();

});

```

Basically we get the table element and call `tableDnD`. If you try this, you'll see that the rows are now draggable.

In the example above we're not setting any parameters at all so we get the default settings. There are a number of parameters you can set in order to control the look and feel of the table and also to add custom behaviour on drag or on drop. The parameters are specified as a map in the usual way and are described the [full documentation](http://isocra.github.io/TableDnD):

You can also play and experiment with TableDnD using this [jsFiddle](http://jsfiddle.net/DenisHo/dxpLrcd9/embedded/result/). Here you get the documentation, plus live examples.