Drag and drop table rows with JavaScript

by

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. First column and contained DIV element in this demo is a row handler, so you can try to drag table rows.


REDIPS.drag example15

It is very easy to define a row handler. Actually, it is only needed to place DIV element to the column (first, last or any other) and to define class=”drag row”. This DIV element will become a row handler. When row dragging begins, source row will change color and content will become transparent. This way, source row as start point is visible and obvious. It is possible to return row to the start point – in this case, event.rowDroppedSource() will be fired. In a moment when row is dropped to the destination table, source row will be removed. How REDIPS.drag works? The trick is to clone a mini table from the source table and to remove all rows except selected row. It looks like a row, but it is a table with only one row – a mini table. New functionality also brings new event handlers:

  1. event.rowChanged
  2. event.rowClicked
  3. event.rowCloned
  4. event.rowDeleted
  5. event.rowDropped
  6. event.rowDroppedBefore
  7. event.rowDroppedSource
  8. event.rowMoved
  9. event.rowNotCloned
  10. event.rowNotMoved
  11. event.rowUndeleted

Each event handler has access to the obj and objOld objects. For example, event.RowClicked() sees only obj object and this is reference to the source row. event.rowMoved() is fired in a moment when dragging starts and in this case, obj is reference to the mini table (previously mentioned) while objOld is reference to the source table row.

REDIPS.drag has a new method: rowOpacity(el, opacity, color) to change color and opacity of the source row and mini table. This way it is only needed to call rowOpacity() method in event handlers to have row effects like in this demo. Here is code for event.rowMoved() used in this demo:

rd.event.rowMoved = function () {
    // set opacity for moved row
    // rd.obj is reference of cloned row (mini table)
    rd.rowOpacity(rd.obj, 85);
    // set opacity for source row and change source row background color
    // rd.objOld is reference of source row
    rd.rowOpacity(rd.objOld, 20, 'White');
    // display message
    msg.innerHTML = 'Moved';
};

REDIPS.drag takes care about background color of table cells and table rows. When dragging begins, color of each table cell is saved to the array and returned in a moment of dropping or highlighting current table row. Source code of REDIPS.drag library with examples can be download from “download icon” below post title. If you want to see more drag and drop examples based on REDIPS.drag, click on Drag and Drop category.

Happy dragging and dropping!

179 thoughts on “Drag and drop table rows with JavaScript”

  3. Pingback: Drag and drop table rows with JavaScript | Redips | spideR Net : Popular Links : eConsultant

  5. Thanks guys – I’m glad you like REDIPS.drag library.

    @oded – Curently it is not possible to drag table columns – only table rows. But as REDIPS.drag evolved from dragging table content to dragging rows, hope one of next releases will have option to drag table columns as well.

  6. thanks …looking forward..for it.

    you did a greate work (i worked before with yahoo and the code it is complex…yours easy)

  7. Pingback: Arrastrar y soltar elementos en una tabla con Javascript

  8. –chrome–
    there is an error on : handler_onmousedown –
    Uncaught TypeError: Cannot read property ‘rows’ of undefined

  9. @oded – I will be very grateful if you can give me more details of how this error appears. I tested this demo in FF3.6, IE8, Safari5 and Opera11 – without any error. It seems I something missed …

    Thank you in advance!

  10. Hi, I’m italian, sorry for any mistakes. I think it’s very useful. But I need to have a fixed row like “Table1” and also a fixed column. For example in “School timetable” there is a weekdays at the top of the table and hours on the left side. I need to drag internal rows without move the first column. Is it possible?
    Thanks

  11. Fantastic work. One question: how easy would it be to implement a double click within your code. I see the single click, but would like it when you double click an item to open a pop up window overlay.

    Thanks!

  12. Pingback: Some links for light reading (19/4/11) | Max Design

  13. line 302
    inside handler_onmousedown {};

    // define source cell, current cell and previous cell (needed for myhandlers)
    REDIPS.drag.source_cell = source_cell = tables[table_source].rows[row_source].cells[cell_source];

    –Cannot read property ‘rows’ of undefined

    my chrome version is 10.0.648.204

    i check again the function i think there is a problem with set_trc ();

    cause i saw it is not initialize the table not the row and not the cell the loop end without initialize

    do u have email ? i can send u the code

  14. i found the problem it is when you add scroll bar and
    do direction rtl it take wrong Measures…

  15. @pat – REDIPS.drag can only move whole table row. It is not possible to drag a part of a row because in a moment of dropping table rows are shifted. Means when row is moved it will left a hole in its place. So, this hole should be filled with upper or lower row. In your case this will not be a whole row – only cells except first cell and that’s not simple. Anyway if you have only labels in first column (like in example03), then keeping label order can be done in myhandler_row_dropped() handler. After row is dropped, JS code will return label order. This is just a hint …

    @George – Good idea, I will try to implement myhandler_dblclicked() event handler. This will be in next release. Thanks!

    @oded – Thank you for reporting a problem in code. I will try to fix REDIPS.drag library. Anyway, you can find my email in “About” page ;)

  16. Thanks, I solved simply the problem by using this example. I turned the first column in different rows. It means that every in the fixed column have become a single row with colspan “all” and class “mark”. So every record stay under his hour’s row and it work perfectly. By using an ID I can exploit the new rows for save_content() function that keep the reference time for every dragged record.
    Thanks again

  17. Pingback: Drag & Drop Table Rows with JavaScript – REDIPS.drag
  18. Pingback: Drag and drop table rows&cells w/JavaScript – REDIPS.drag | Webification
  19. Pingback: The Fancy Web #33 | Travis, Travaganza

  20. Congratulation for your script !!!

    I want to save any changes when it happends. So I used the myhandler_row_moved event and put an alert() in to test it. My problem is that the alert appears when I click on the left column and not when the rows moved…

    Can you explain this problem ?

    (sorry for my catastrophic english)

Leave a Comment