Drag and Drop table content with JavaScript

Content of HTML table cells can be dragged to another table cell or another table. It isn't difficult to define onMouseMove handler and change top / left element styles to move the object. In case with tables, you will have to determine somehow destination table cell. Attaching onMouseOver handler on table cells will not work, because browser doesn't fire events to the elements beneath the dragged object.

Drag and Drop, JavaScript Video Download / Preview GitHub 707 Comments

Drag and drop table rows with JavaScript

REDIPS.drag was initially built to drag and drop table content. After publishing first version of REDIPS.drag, I received a lot of questions about dragging table rows also. Now is possible to drag and drop table rows as well as table content.

Drag and Drop, JavaScript Video Download / Preview GitHub 98 Comments

JavaScript Drag and Drop example 3

School timetable is example of how to use REDIPS.drag library. Page layout contains two tables: left table with school subjects and timetable on the right. After subject is placed to the timetable, button in the same color will be displayed next to the subject (clone object).

Drag and Drop, JavaScript Video Download / Preview GitHub 76 Comments

REDIPS.drag documentation

REDIPS.drag is a JavaScript drag and drop library focused on dragging table content and table rows. Here you will see a list of public properties and methods contained in REDIPS.drag library. Documentation is generated with JsDoc Toolkit.

Drag and Drop, JavaScript Video Download / Preview GitHub 30 Comments

JavaScript drag and drop plus content shift

Demo is based on REDIPS.drag JavaScript library with enabled shift drop option. After element is dropped to the cell, other elements will be shifted to make room. Animation is optional and can be turned off. The presented demo can be a good start point for various sorting Web applications.

Drag and Drop, JavaScript Video Download / Preview GitHub 19 Comments

Drag and drop table content plus animation

Example shows drag-n-drop functionality in combination with animation. Tables are closed within separated drag containers and actions from any table are mirrored to the other table. Elements can be shuffled or reset to the initial position.

Drag and Drop, JavaScript Video Download / Preview GitHub 6 Comments

REDIPS.drag documentation - Appendix A

Here is list of keywords (mostly class names) used in REDIPS.drag library. Id of drag container(s) or table cell class names should be named properly to achieve needed functionality like cloning DIV elements, adding trash cell, mark cells, adding row handler or mark table as "nolayout". This post is appendix to the REDIPS.drag documentation post.

Drag and Drop, JavaScript Video Download / Preview GitHub Leave a comment
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.