WebAppers

/ best free open source web resources /

Shopify

Drag and Drop Table Content with Javascript

Posted · Category: License Free, Tables

With 200 lines of JavaScript, you can drag and drop table content. Content of the HTML table cells can be dragged to the another table cell or another table. Script has built in autoscroll and option to forbid landing to some table cells. Table could have rowspan or colspan cells and different background color for every cell.

In order to detect destination table cells, script calculates all table cell coordinates / dimensions and store them to the arrays. Arrays are searched inside onMouseMove handler and when user release left mouse button, object will drop to the current table location.

drag and drop table content

Requirements: FireFox 3, Internet Explorer 6 and Google Chrome
Demo: http://www.redips.net/javascript/drag-and-drop-table-content/
License: License Free

2 Comments
  • http://site.vanjasper.com Jasper

    I’ve tested it briefly, and it seems to also work well in Safari 4.

  • Unnati

    plz specify where’s the code actually…so that we can learn..and its an excellent work indeed.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons