Drag and Drop table content with JavaScript

Content of HTML table cells can be dragged to another 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 target cell. Attaching onMouseOver handler on TD elements will not work, because browser doesn’t fire events to the elements below the dragged object.

Anyway, after taking care of the current scroll position and calculating TD positions, REDIPS.drag should work in recent major browsers like Google Chrome, Firefox, Safari, Internet Explorer, Opera and mobile devices as well. Click on image below, will open live demo where you can drag green, blue or orange bordered DIV elements, change properties (radio button and check-boxes) and click on “Save” button.

Download latest version redips2.tar.gz


REDIPS.drag example01

In this example “Save” button will scan table content, create query string and send to PHP page. Demo shows how to collect content and accept parameters on the server side. More about accepting parameters you can read at Reading multiple parameters in PHP. “Clone” elements (orange in this demo) will be duplicated first because of “redips-clone” keyword contained in class name. If you drop object on cell named “Trash”, object will be deleted from the table (with or without confirmation). Library has built in autoscroll and option to forbid landing to non empty cells or cells named with class “redips-mark”. Table can contain rowspan / colspan TDs and different background color for every cell.

Here are minimal steps to enable content dragging in table:

  • put <script type=”text/javascript” src=”redips-drag-min.js”></script> to the head section
  • initialize REDIPS.drag library: <body onload=”REDIPS.drag.init()”>
  • place table(s) inside <div id=”redips-drag”> to enable content dragging
  • place <div class=”redips-drag”>Hello World</div> to the table cell

Other features of REDIPS.drag library:

  • methods and data structure are defined in namespace (easier integration with other JS frameworks)
  • all JavaScript code is checked with ESLint
  • REDIPS.drag documentation generated with JsDoc Toolkit
  • drag and drop table rows
  • movable DIV element can contain other HTML code (images, forms, tables …)
  • forbidding or allowing TDs marked with class name “redips-mark”
  • option to define exceptions and allow dropping certain DIV elements to the marked cell
  • option to define single content cell on the table declared with “multiple” drop option
  • cloning
    • for unlimited cloning add “redips-clone” class name to the DIV object
      <div class=”redips-drag redips-clone”>Hello World</div>
    • to limit cloning and transform last object to the ordinary movable object add ‘climit1_X’ class name
      <div class=”redips-drag redips-clone climit1_4″>Hello World</div>
    • to limit cloning and transform last object to immovable object add ‘climit2_X’ class name
      <div class=”redips-drag redips-clone climit2_4″>Hello World</div>
    • where X is integer and defines number of cloned elements (in previous examples, each climit will allow only 4 cloned elements)
  • unlimited nested tables support
  • dropping objects only to empty cells
  • switch cell content
  • switching cell content continuously
  • overwrite TD content with dropped element
  • shift table content
  • table cell with “redips-trash” class name becomes trashcan
  • enabled handlers to place custom code on events: changed, clicked, cloned, clonedDropped, clonedEnd1, clonedEnd2, dblClicked, deleted, dropped, droppedBefore, finish, moved, notCloned, notMoved, shiftOverflow, relocateBefore, relocateAfter, relocateEnd, rowChanged, rowClicked, rowCloned, rowDeleted, rowDropped, rowDroppedBefore, rowDroppedSource, rowMoved, rowNotCloned, rowNotMoved, rowUndeleted, switched and undeleted
  • deleting cloned DIV if the cloned DIV is dragged outside of any table
  • enabling / disabling dragging
  • animation (move element/row to the destination cell/row)
  • added support for touch devices (touchstart, touchmove, touchend)

How REDIPS.drag works?

Script will search for DIV elements (with class name “redips-drag”) inside tables closed in <div id=”redips-drag”> and attach onMouseDown event handler. When user clicks with left mouse button on DIV element, onMouseMove and onMouseUp handlers will be attached to the document level.

While dragging DIV element, script changes its “left” and “top” styles. This is function of the onMouseMove handler. When user releases left mouse button, onMouseUp event handler will unlink onMouseMove and onMouseUp event handlers. This way, browser will listen and process mousemove events only when DIV element is dragged.

As I mentioned, onMouseDown is defined on the elements you want to drag. Elements beneath the dragged object will not be able to catch onMouseOver event. Why? Because you are dragging object and that object only can catch the onMouseOver event.

So, to detect destination table cells, script calculates all cell coordinates (with scroll page offset) and store them to the array. Array is searched inside onMouseMove handler and after left mouse button is released, DIV will drop to the current (highlighted) table cell.

In redips2.tar.gz package you will find many examples including example of how to save/recall table using PHP and MySQL. Package also contains and redips-drag-min.js – a compressed version of REDIPS.drag library (compressed with Google Closure Compiler).

Happy dragging and dropping!

1,195 thoughts on “Drag and Drop table content with JavaScript”

  2. Has all the features and more I was looking for in a drag and drop table. Should be great for a small project I am getting started on. Thanks for this — and for the liberal license!

  3. @ccl09c – Thanks and just for a note – new version (5.0.0) will be published in a week or two with rewritten property and event handler interface. Unfortunately backward compatibility will be broken but I will post a list with old and new property / method / event handler names. This will be good enough to help in renaming process.

  7. @Marcus Andersson – I’m glad you like REDIPS.drag lib. Hope it will be useful for your project.

    @leszek – Label of dragged DIV element can be changed within many of event handlers. Here is how to change label after DIV element is dropped to the table cell:

    // set reference to the REDIPS.drag
var rd = REDIPS.drag;
// set event handler
rd.event.dropped = function () {
    // set new DIV label
    rd.obj.innerHTML = 'Some new label';
};

  8. Is there a description of compatibility of different versions of drag with different versions of browsers? For example does the current release support IE7? Etc.

    Thanks.

  9. @Phil Wallingford – REDIPS.drag was declared to support IE8+ browsers even before publishing version 5. Anyway, version 4.7.6 also works in IE7 (not perfect but dragging is possible). Due to applying new DOM selectors in new version, dragging in old browsers are no longer supported.

    http://caniuse.com/queryselector

  10. This is brilliant work. I have a special need as follows. I am a Math teacher and am trying to build a simple game. In the left column is a random array of tiles with single integers on them. In the middle column are drop targets with numerical values. My goal is this – to have a third column where the values of the dragged tile are multiplied with the values of the drop targets and the resulting answer appears in the cell directly to the right. So essentially if tile A (draggable) is a “5”, and the drop targets (which are vertically stacked) have values of 1-10, then dragging the “5” tile on the drop target with a value of “7” would return the answer of “35”

    If anyone can help me with this I would appreciate it. My school provides no funding for building apps and this would be so helpful to get the kids seeing the immediate calculations for learning their multiplication tables. Thank you in advance for any help you can give me.

  11. Hi, I am having some trouble try to remove all the rows in the first table from the start.
    Is it actually possible to set one of the table with no rows from the first load and allow you to drag and drop your rows from the second table to first table.
    Where in the code or HTML setting I need to make it work?

  12. Hello,
    great lib with many examples and quite well documented.

    My point is to integrate your lib with other libraries, but i’m failing with the following configuration:
    – twitter bootstrap (js+css)
    – jquery (js)
    – knockoutJS (js)
    – redips2 (js)
    – custom css

    Any hint or feedback about this?

  13. @Steven Marcus – I have prepared example25 (Multiplication) that can be start point for learning times table. Hope this is similar to your idea. Address of new demo is:

    http://www.redips.net/my/preview/REDIPS_drag/example25/

    @Liz – Please see example20 (Clone and delete table rows) and initial state of second table (source code is in script.js). As you can see, table contains two rows. First row is forbidden because of TH while second row is marked as empty. So, if you want “empty” table you can create table with one row and mark that row as empty like this:

    // mark first row of table id="myTable" as empty
rd.rowEmpty('myTable', 0);

    First dropped row will overwrite empty row.

    @ptitjuju69 – REDIPS.drag is encapsulated inside REDIPS namespace and there should not be any collision with other JavaScript frameworks. Example0 (AJAX JQuery) is simple demo where second table is loaded using $.ajax request of JQuery. Maybe styles needed for REDIPS.drag are overwritten or wrongly inherited and that causes the problem in your case.

  14. Great library. One question. Can a checkbox be added and all selected be dragged and dropped?

  15. @Eduardo – Yes it can. Please see example 12: Select and move more elements. Actually, not all DIV elements will be dragged together, but after dropping one DIV element, other DIV elements will be relocated to the destination table cell. Hope this example will be helpful for your case.

  16. Hi, i have this problem, maybe you could help me. I have this 3 drag&drop , but 1 of them just must receive items from a specific . how can I check that, How can I choose the source for this drop-able ,
    I hope you could take a bit of time to help me.
    thanks

  17. Hi,

    I need to show a popup “Confirm move?” when I drag and drop an element from one position to the other. On choosing cancel, it should prevent the drop, and restore the element in its previous location.

    How do I do that?

    Thanks

  18. First let me say I am profoundly grateful for your brilliant work. The demo is fantastic and I can even understand it in principle. You are very generous to have taken the time to create the solution so elegantly.

    if it’s not too much trouble to ask, I have another question. If I wanted to be able to make the resulting numerical answer a clickable hyperlink, open a popup or even initiate a javascript command to slide a panel (like a spry panel) so the kids could understand the mechanics of math and not just see the answer – how could I do it? I see by the script that basically the answer appears in the div

    // add or multiply num1 and num2 and place result to the last cell in the row
if (operation === 'addition') {
    tr.cells[4].innerHTML = num1 + num2;
} else {
    tr.cells[4].innerHTML = num1 * num2;
}

    by combining the values.

    I tried using 

    tr.cells[4].innerHTML =a href =" + num1 + num2 + .html";

    but it didn’t work. I am sure you know why. Any thoughts? I am brave in my own way, but there are things which remain elusive to those of us who got our education before there were even computers.

    Thanks again.

  19. @marcelo – You can place JavaScript code in droppedBefore event handler (this will be executed in a moment before DIV element will be placed to the target TD). There can be any custom code and if your logic “decides” that dropped DIV element doesn’t belong to the target cell, just return false from this event handler. In this case, dropped DIV element will be returned to the source cell.

    @Mentalic – Please see new example26 (it could be helpful for your project). This is combination of jQuery and REDIPS.drag lib. Example 26 will display jQuery popup only in a case if target cell is not empty (you can change this if needed) with options to “shift”, “switch” or “overwrite” target cell. If user clicks on “X” in a upper right corner, then dragged DIV element will be returned to the source TD. Playing with confirm dialog is a bit complicated because dragged DIV element should be dropped somewhere (it can’t be left in the air) while dialog is shown. So the trick is to remove dragged DIV element from the element flow (but it still exists in browser memory) and after user made choice, place temporary deleted DIV element somewhere to the table.

    @Steven – This is not a problem and I will upgrade example 25 “Math 4 kid” in the next week. I already made some changes but it needs a little more polishing.

Leave a Comment