Drag and Drop table content with JavaScript

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

1. owesome script

2. Hello Darko,

   Please disregard my previous post about the “CANCEL” move event. I have figured it out. It took me a little to figure it. I had a bug in some over code which complicated my troubleshooting.

   You have done a really great job with this code. I will be sending you a donation for sure! It’s very clear you put a lot a thought and clarity into your programming!

   Great job!

   Chris from Atlanta, Georgia, USA

3. Darko,

   You should see a payment sent by PayPal.

   If I get a chance, I may try to do this, but I was curious if you would consider this as a possible feature.

   You offer “Switching content continuously” which is nice. However, it forces cell contents into multiple directions depending on the source cell. Is it possible to have a free-flow option? Just as if you have word-wrap on. As an example…If you insert a word into the middle of a sentence…the words continue to flow in a linear method. This of a photo gallery picture sorter when if I take a picture from the bottom and insert it more up to the top…all the photos remain in order allowing “insertion” of a new photo.

   Just something to consider…I think it would be a worthwhile feature.

   Again, great job!!! I’ve been looking for something like this that really works! for a long time.

   Best,
   Chris from Atlanta, Georgia, USA

4. Great job !! thanx

5. @joerg – If you want to change DIV element height depending on the current row height, here is how:

   rd.myhandler_dropped_before = function (cell) {
       // define local variables
       var tr, height;
       // set reference to the current row
       tr = rd.find_parent('TR', cell),
       // get height of the current row and prepare height for the DIV element
       height = tr.offsetHeight - 15;
       // set height to the DIV element
       rd.obj.style.height = height + 'px';
   };
   

   @Chris – I’m glad you solved the problem about “cancel move event” and thank you very much for a generous donation. It will help me to keep motivation and to carry on with developing REDIPS.drag library. Your donation is very appreciated. Thank you once again.

   Your suggestion about “free-flow” dragging option seems OK and I will put it on “todo” list for the next lib release. In comparison to current drop options, “free-flow” will shift many elements to make a room for a new element and to keep the elements order. Thanks!

6. Darko,

   You are certainly welcome and I can understand needing encouragement to support development of this kind. Again, I am very excited to have found your library as it has helped me greatly.

   I look forward to any future enhancements that come about.

   Best,
   Chris

7. Hi, Is it possible to save the drag and drop changes (like aligment of control elements) of a broswer page and rendering the changes when the same broswer page is called the next time.

   Regards
   Hari.M

8. @HMuddada most anything is possible. It’s just a matter of coding it. You would most likely have to sweep through all the elements and read their properties and then post that back to a database to be used at a later time when you regenerate a webpage. I think that might be too much data for cookies. You could always use a cookie to reference the saved session/state.

9. @HMuddada – I agree with Chris. Cookies are not the best solution for storing great amount of data. Anyway in a fortcoming HTML5 standard, it will be possible to use web storage (it is like a cookies on stereoids) and web sql databases (not sure what’s the latest status) to save data on the client side. In the meanwhile the best option will be to save drag and drop changes to the database.

10. Hi

    I’m just trying this out and it works great, good work. Just wondering is there a class which can have the item marked so it cannot move but still be able to click on it and cause an event?

    Basically i want some info to popup when i click on marked items

    Thanks

    Anthony

11. Scrap the above question i just added the onclick event in the div element. But another question is, is it possible to delete the div through a button rather than having to drag to a ‘trash’ cell?

    Thanks

    Anthony

12. This is a really nice script, although I have had a little trouble figuring a few things out. One thing that seems like could make this a little bit better to understand is if custom attibutes were used instead of Classes. For example:

    <div id="myID" class="myClass" draggable="1">My Content<div>
    

    Then the Div can only be dragged if that attribute is set to 1 (or ‘true’, or whatever). Just a thought!

13. FYI, dragging a cloned object “off the table” does not work because the “cloned” property is wrong. It is not maintaining state because “cloned” is basically a global variable, and not a property of the object itself. I am only moving DIVs (and not ROWs), but I believe I fixed it by changing the reference to use and set obj.cloned, and then changing “moved = cloned = false;” to “moved = false;” inside handler_onmousedown.

    So far is seems to be working perfectly and behaves like I need it too.

14. @Anthony – I’m glad you solved the problem with adding onclick event to the DIV element. Here is example of how to delete DIV element with a simple function. Input parameter is id of DIV element:

    function mydelete(id) {
        // set element reference
        var div = document.getElementById(id);
        // delete DIV element
        div.parentNode.removeChild(div);
    }
    

    @Bryan – Custom attributes will be formally supported in HTML5 using the “data” attribute. The exact format will be data-*, where * can be replaced with the desired custom attribute name. So in this context HTML will look:

    <div id="myID" class="myClass" data-draggable="1">My Content<div>
    

    As I started developing REDIPS.drag library before HTML5 came near to the current state, I had to take care about passing HTML validation and not to use custom attributes. Anyway, your comment is OK and future REDIPS.drag releases will switch logic from class names to the custom attributes.

    I’m trying to figure out how dragging a cloned object doesn’t work. Do you have prepared example to show? I will be very grateful if you can give a little more details about problematic example. “clone” inside REDIPS.drag is a current flag. In a moment when DIV element is clicked, this flag is set to false. When user moves DIV element, element will be moved or cloned (and “cloned” flag will be set to true). “cloned” flag is used in many points inside REDIPS.drag so I’m not sure to change this flag to the object property. If user script needs information if object is cloned or not, this can be added inside clone_div() method. Thanks for helping make REDIPS.drag a better library.

15. Hi, I have some script to add (new) elements to the table and I’ve created them with class “drag” but the code doesn’t recognize them for dragging – I assume because it only sees these when the initial code is run.

    I can’t see a function to call to tell the code this is a new draggable element but I must be missing it somewhere – what should I call?

16. @Keith Z – Just call REDIPS.drag.init() to rescan DIV elements. New DIV element should behave like it was on table from beginning.

17. Hi Darko,
    sorry for my late Thank you message. I was in the vacation for 3 weeks ;) Thank you very much for your help. It works great!
    I have one more question. How can I change the size of the element which is located in the DIV element. Let’s say, I have an image in DIV. When I drag&drop a DIV from 1st row to 5th row, I want to have smaller image in the 5th row. But, when I drag&drop the DIV element from 5th row to 1st row back. I want to have again normal size image.
    Thanks in advance,
    Joerg.

18. Hello Darko!

    My aspx is like this:

    <td id="111"></td>
    

    and my JS is like this:

    $d = $("<div class=\"drag\">zzz</div>");
    $("#111").append($d);
    

    But it does not work!
    Help please!

19. @joerg – The same way as DIV height was changed, child element height can be changed too. rd.obj is reference of dragged DIV element. You can extend previous function like:

    rd.myhandler_dropped_before = function (cell) {
        // define local variables
        var tr, height1, height2, img;
        // set reference to the current row
        tr = rd.find_parent('TR', cell),
        // get height of the current row and
        // prepare height for the DIV element and image
        height1 = tr.offsetHeight - 15;
        height2 = tr.offsetHeight - 20;
        // set reference to the image inside DIV element
        // suppose that is only one image within the DIV
        img = rd.obj.getElementsByTagName('img')[0];
        // set image height
        img.style.height = height2 + 'px';
        // set height DIV height
        rd.obj.style.height = height1 + 'px';
    };
    

    This way, DIV element and image inside DIV element will change height after element is dropped to the table row. Image width (and other style properties) can be changed as well.

    @zhaowx – After DIV element was dynamically added to the table you should call REDIPS.drag.init() method to rescan table content.

    $d = $("<div class=\"drag\">zzz</div>");
    $("#111").append($d);
    REDIPS.drag.init();
    

    Init method will assign event handlers to DIV element so it can react on mouse click. If you will still have problem with this example or any other question, don’t hesitate to ask.

20. yeah,it works!

    really thanks!