Drag and Drop table content with JavaScript

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

1. @Mark – Please download latest REDIPS.drag (version 4.7.3) and try the following code. This will append innerText from the bottom DIV element to the dropped DIV element:

   // define redips_init variable
   var redips_init;
   
   // REDIPS initialization
   redips_init = function () {
       // reference to the REDIPS.drag lib
       var rd = REDIPS.drag;
       // initialization
       rd.init();
       // set drop option to overwrite
       rd.drop_option = 'overwrite';
       // event hander (it will run before dropping DIV)
       rd.myhandler_dropped_before = function (target_cell) {
           // define reference to the DIV element in TD
           var div = target_cell.getElementsByTagName('DIV')[0],
               text;
           // if bottom DIV element exists
           if (typeof(div) === 'object') {
               text = div.innerText || div.textContent;
               // append text from bottom DIV
               rd.obj.innerHTML += ' ' + text;
           }
       };
   };
   
   // add onload event listener
   if (window.addEventListener) {
       window.addEventListener('load', redips_init, false);
   }
   else if (window.attachEvent) {
       window.attachEvent('onload', redips_init);
   }
   

2. @dbunic
   Wow buddy. This works great :) I can’t describe in words that how much helpful you are. It feels great to meet people like you.
   Well, there are more questions which I may be asking in future if I may not be able achieve some other goals.
   Thanks once again.

3. Well, I think I should ask those questions right away :D

   1) Is it possible to apply different drag options on different tables. Like in one, switching is enabled and other one has the overwrite feature?

   2) Say, “table 1” has different data cells consist of three different types (a, b and c) only that DIV can be moved to “table 2” which is the “resultant” after merging exactly three DIVs of exactly three types (a, b and c). How it can be achieved? There should be other restrictions like one DIV may contain exactly one type at a time. For e.g. “resultant” may consist of type {a, b and c} only. No { a, a b } no { a b b} etc…

4. @dbunic,
   Great thing you are doing here. one thing though: After dropping the cell, when saving, how can I get a specific ID for the row instead of the table index? I have a key column, which is not ordered, and I need to know where was my cell dropped so I can update my records with it. Am I missing something?
   Thanks and best regards,
   Amit, Israel

5. @Mark

   1) Yes it’s possible to change “drop option” based on bottom table. Please see example09 where drop option is changed in myhandler_moved() event handler. Here is code snippet:

   // in a moment when DIV element is moved, set drop_option (shift or single)
   rd.myhandler_moved = function () {
       // find parent table of moved element
       var tbl = rd.find_parent('TABLE', rd.obj);
       // if table id is table1
       if (tbl.id === 'table1') {
           rd.drop_option = 'shift';
       }
       else {
           rd.drop_option = 'single';
       }
   };
   

   2) If you want to allow dropping only DIV elements with content “ABC” to the second table here is simple JS code in myhandler_dropped_before() event handler:

   rd.myhandler_dropped_before = function (target_cell) {
       // define reference to the bottom DIV element
       var div = target_cell.getElementsByTagName('DIV')[0],
           // content of bottom DIV element
           divText1,
           // define content of dropped DIV element
           divText2 = rd.obj.innerText || rd.obj.textContent,
           // find target table
           tbl = rd.find_parent('TABLE', target_cell);
       // if target is table2
       if (tbl.id === 'table2') {
           // if dropped DIV does not contain "A B C" then return it to the start position
           if (divText2 !== 'A B C') {
               return false;
           }
       }
       // if bottom DIV element exists then try to merge content
       if (typeof(div) === 'object') {
           // define content of bottom DIV element
           divText1 = div.innerText || div.textContent;
           // compare content of bottom and dropped DIV element
           // if "A" already exists then return to the start position
           if (divText2.indexOf(divText1) > -1 || divText1.indexOf(divText2) > -1) {
               return false;
           }
           // merge content
           rd.obj.innerHTML += ' ' + divText1;
       }
   };
   

   The same can be done with content merging. It’s only needed to compare strings of bottom DIV element with text in dropped DIV element. The posted solution is not a perfect because DIV content should be split before comparison but I hope it will give you a right direction how to solve the problem.

6. @Amit Nevo – Here is how to obtain TR id of dropped DIV element:

   rd.myhandler_dropped = function (target_cell) {
   	// define TR where DIV element is dropped
   	var tr = rd.find_parent('TR', target_cell);
   	// display table row id
   	console.log(tr.id);
   };
   

7. @dbunic
   Thanks for the rapid reply, but please allow me to pinpoint the question? can I get this in the save function? I need my server to get the id when pressing the save button, after all changes have taken place. what function do I need to incorporate this?

   Many thanks and sorry about the bother,
   Amit

8. @Amit – Well, REDIPS.drag doesn’t have built-in option to send row ID but here is how to get such functionality. From the redips-drag.js file copy save_content() method to your script.js file. Rename save_content to mysave_content. You will need to declare mysave_content below redips_init like:

   // define redips_init and mysave_content variables
   var redips_init,
       mysave_content;
   

   Now you can customize mysave_content to send row ID. Declare “row_id” variable and replace:

   if (cn.nodeName === 'DIV' && cn.className.indexOf('drag') > -1) {
       // prepare query string
       query += pname + '[]=' + cn.id + '_' + r + '_' + c + '&';
       // push values for DIV element as Array to the Array
       JSONobj.push([cn.id, r, c]);
   }
   

   with:

   if (cn.nodeName === 'DIV' && cn.className.indexOf('drag') > -1) {
       // set row id
       row_id = tbl.rows[r].id;
       // prepare query string
       query += pname + '[]=' + cn.id + '_' + row_id + '_' + c + '&';
       // push values for DIV element as Array to the Array
       JSONobj.push([cn.id, row_id, c]);
   }
   

   This modification will send row ID instead of row index to the server side.

9. I am creating dynamic with JavaScript and would like one TD element to be able to be dragged to another dynamic table.

   To create I do the following:

   var cellani = row.insertCell(0);
   var divStr = '' + ani + '';    
   cellani.innerHTML = divStr;
   

   It shows as clickable but the event never reaches your handler.

   If I have a static row I can Items from there and place them in the dynamic table.

   Is there anything I can try?

   BTW it is a very nice library and is easy to implement.

   Ben

10. @Ben Levy – First try to make drag container visible. If newly created TD exceeds drag container then it will not be accessible for dragged DIV elements:

    #drag {
        border: 2px dashed LightBlue;
        display: table;
    }
    

    Next, dynamically created DIV element (and added to the table) should be initialized. Re-initialization can be done with calling REDIPS.init() method, but the better approach is to call enable_drag() to avoid overhead. Here is a code snippet from documentation of how to call REDIPS.drag.enable_drag():

    // initialize element with id="id123"
    rd.enable_drag(true, 'id123');
    
    // or init dynamically added element with myElement reference
    rd.enable_drag(true, myElement);
    

    Hope this tips will help.

11. Hello,

    first I would like to say a big thank you for your wonderfull work. You are very gifted. And my question is : is it possible to draw a div of not only one cell but 2 or more cells.

    Thank you very much.

12. Hi,

    thanks for the great script, just one question, how can i add more element on example 22, where i can drag the element from left column to the right column, and after dragging the option page will open.

    Is it possible for me to drag more than one item to the right column?

13. @farinis – One DIV element can be dropped to only one table cell. So direct answer to your question is “no, it’s not possible”. But if you take a look to the example 24 Table editor, you will see that bottom table can be dynamically modified. Rows can be added / deleted and table cells can be merged and split. Table functionality is achieved with REDIPS.table library. So, cells can be first merged and then dropped DIV element will strech to fill merged cells. DIV width is set in myhandler_dropped_before() event handler.

    @Eizil – Your question is similar to the farinis’s question, so the answer will be also similar ;) It is possible to drag only one DIV element at a time. But you can use a trick and mark other DIV elements that should be moved as well. Please see example 12 Select and move more elements. Try to mark few DIV elements and make a move. You will see how marked DIV element will be moved to the destination cell. Animation is optional and moving marked DIV element can be instantly.

14. @dbunic
    Thanks for your suggestions. My website is getting interesting day by day after implementing your suggestions. As usual I have some queries. When I’m using the event, myhandler_moved(), this line is not able to search the parent table id and returning null, when the moving div option is set to ‘clone’:

    var tbl = rd.find_parent('TABLE', rd.obj);
    

    Except for clone, it is working fine. Also, tell me that I want to catch the id of deleted element after user presses OK on the confirm dialog result. And pass that id to my own function. Kindly point me to the right direct (as you always do :D)
    Thanks in advance.

15. @Mark – For the first question please download new redips2.tar.gz package – version 4.7.5. In latest version, myhandler_moved has optional input parameter “cloned”. This is needed to know whether current DIV element is cloned or not. In case when DIV is cloned then origin for table search is rd.obj_old. Here is complete code:

    rd.myhandler_moved  = function (cloned) {
        // define table
        var tbl;
        // if DIV is cloned then then start point is bottom DIV element
        if (cloned) {
            tbl = rd.find_parent('TABLE', rd.obj_old);
        }
        else {
            tbl = rd.find_parent('TABLE', rd.obj);
        }
        // print table id
        console.log(tbl.id);
    };
    

    rd.ob_old is also needed to catch the id of deleted element:

    rd.myhandler_deleted = function () {
        // define deleted element
        var div = rd.obj_old;
        // print id of deleted DIV element
        console.log(div.id);
    };
    

    Hope this will help …

16. that’s perfect :)
    many many thanks…

17. @dbunic
    Hi,
    Great Code,
    I have a question. I am working with example 24, but when I drag a block to the right cell, I need to create a new cell, so I just need 1 row with N cells. Is there a function to do it?

    Regards
    Orlando Ibarra
    Thanks for everything

18. Thank you for great code!
    I have trouble executing the JavaScript code using AJAX call. Is there a way around this?

19. @dbunic – Firstly I want to thank you for a great library, I just wanted to ask your advice if I may? I am using example 3 but want to use an extra table called ‘room’. I have successfully got 2 cells for each time slot, one for room and one for subject, and I have been able to add an extra table with room numbers to drag to the timetable. When I save it the room is successfully saved to the database but is doesn’t display in the table. I would really appreciate any help here, Thanks

20. @Orlando Ibarra – Yes, new row can be created with REDIPS.table.row(table, mode, index) method. Please download redips12.tar.gz from Merge and split table cells with JavaScript page where you will see several examples. REDIPS.table also has a documentation page.

    @Jim – You can find several examples using REDIPS.drag and AJAX:

    • Example 0: AJAX / jQuery modification
    • Example 16: AJAX, hover, sticky, dragging
    • Example 22: Drag and form details
    • Example 23: Shopping cart
    • Example 24: Table editor

    I also wrote a post about AJAX progress bar with a live demo so you can see all needed details and how to make it in a cross-browser manner.

    @Tatty27 – Please take a look to the timetable($hour, $row) PHP function in config.php file. After timetable (with room numbers) is saved to the database, try to execute select query located in “timetable” function with MySQL Browser, MySQL Workbench or phpMyAdmin. Rows with room number should be fetched also. If they exist in record set, then try to print out $elements array with the following line:

    print_r($elements);
    

    And the last step is to place print $elements[$i] inside for loop:

    print_r($elements[$i]);
    

    Your problem is on the server side, so you only need to tune PHP variables. Hope this simple “print” technique will help you in debugging PHP code.