Drag and Drop table content with JavaScript

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

1. @Jerry – REDIPS.drag library works with one DIV element. Only one element can be dragged in time. But every DIV element could have checkbox. Before dragging you could check elements that should be moved. In myhandler_dropped() after one element is dropped to the destination, custom JS code will relocate other checked elements.This is just an idea that seems to be possible ;)

   @Mat – Yes it’s possible to change style of dropped element depending on where is dropped. Let’s assume your table cells have assigned id ‘left’ and ‘right’. Bottom code will do the work. Please try.

   window.onload = function () {
       // initialization
       REDIPS.drag.init();
       // define myhandler_dropped
       REDIPS.drag.myhandler_dropped = function () {
           var obj = REDIPS.drag.obj,
               // current element
               tac = REDIPS.drag.target_cell; // target cell
           // if target cell has id left
           if (tac.id === 'left') {
               obj.style.float = 'left';
           }
           // otherwise
           else {
               obj.style.float = 'right';
           }
       };
   }
   

2. Hello dbunic!
   Great work you have been doing! Thank you!

   I wanted to know if there’s a way drag to a div that changes position while scrolling the page (“sticky”).
   I have a div on the right with the contents to drag, and a div on the left where i want to drop. This left div slides down as I scroll the page down.

   eg:

   var $stickyHeight = 600;
   var $padding = 20;
   var $topOffset = 100;
   var $footerHeight = 83;
   
   function scrollSticky() {
       if (jQuery(window).height() >= $stickyHeight) {
           var aOffset = jQuery('#sticky').offset();
   
           if (jQuery(document).height() - $footerHeight - $padding $topOffset) {
               jQuery('#sticky').attr('style', 'position:fixed; top:' + $padding + 'px;');
   
           } else {
               jQuery('#sticky').attr('style', 'position:relative;');
           }
       }
   }
   
   jQuery(window).scroll(function () {
       scrollSticky()
   });
   

   When the mouse is over the drop cell in the left div, if the div is in the default position (page load), it works fine. But if I scroll the page down the area where the drop is allowed rains at the top of the page and not the current cell position!

3. Hi Darko,

   thanks so much for your fast reply.

   Sadly, i wont get it to work. Your code makes perfect sense to me (i would even extend it with an “center” option) – but still the dropped divs dont get any floating attribute.

   Here’s an example of how i used it – is there anything basic i missed out?
   When i give out the vars “obj” and “tac” i get obj: [object HTMLDivElement] tac: [object HTMLTableCellElement] – that right?

   ————-code————-

   drag_demo

   window.onload = function () {
       REDIPS.drag.init();
       REDIPS.drag.myhandler_dropped = function () {
           var obj = REDIPS.drag.obj,
               tac = REDIPS.drag.target_cell;
           if (tac.id === 'left') {
               obj.style.float = 'left';
           } else {
               obj.style.float = 'right';
           }
       };
   }
   

   Source
   left
   right

   short

   12345

   xxx

   ————–code—————-

   Best,
   Mat

4. addition to my post:
   the variables are al right of course, i get the right values with obj.id and tac.id
   Also, “obj.style.float” set to “right” or “left”
   Still, the div doesn’t bother about that…

   mat

5. did it!
   It’s just a minor twist – i have to use ‘cssFloat’ ( or ‘styleFloat’ oft IE) instead of ‘float’ to set the floating…now it works perfectly.

   Mat

6. Hi dbunic :)

   I encountered a problem while using your – great BTW – drag library. Let’s imagine we have table in drag div and insinde some cells there are dragging div with images in them. Now, when i click outside the image i want whole div to drag, but when i click on the image i want only this image to drag, to another dragging div.

7. Hi Darko,

   i have still one nut to crack:
   How do i get elements, that are dropped in a cell with id=’center’ to float while beeing centered all together in the cell?

   left	center	right

   The div obviously doesn’t bother about the cell’s text-alignment setting, ‘margin: 0px auto’ doesn’t work either.

   Do you see a quick solution for that?

   Thanks,
   Mat

8. @Paul – Basic dragging element is DIV and dropping topology is TABLE. Unfortunately this library hasn’t option to drop DIV element to another DIV element. Everything contained in DIV will be dragged with DIV element. You can style DIV element to be invisible so it will look like dragging DIV content.

   @Mat – I’m glad first issues are solved. If I understood your question, you want DIV elements in the middle cell to be side-by-side and centered? Originally, dropped elements will be centered but one beneath the other. Maybe you will have to play with “display” option. Here is good source of display declaration: quirksmode: The display declaration

   @Pedro – Just to be sure. REDIPS.drag needs main DIV container with id=”drag”. Main DIV container can contain tables with content to drag. Page can have separated containers and content from container1 can’t be moved to container2. Are your left and right tables included in the same DIV container? I understood that left table has position: fixed and that means it is taken out from the normal flow on the page. REDIPS.drag can be modified to support fixed position of the container, but I’m not sure about combination of fixed and static position of two tables at the same time. Unless main DIV container is stretched to the whole page – is this your scenario?

9. Hi Darko, thank you for your quick reply.

   Yes my left and right tables are included in the same DIV container id=”drag”.
   Left table position is fixed.
   How can it be modified to support fixed position of the container, with the combination of fixed and static position of two tables at the same time?
   The main DIV container “drag” wans’t stretched to the whole page; I changed it to be right after the tag and made no diference.

   I accept any sugestions, i’m running out of ideas :)
   thanks
   Pedro

10. @Pedro – I’m now in modifying process of REDIPS.drag library to support position:fixed for table or scrollable table container. It seems to work. I need a day or two to prepare a new example and make testing. Patience please ;)

11. Hi guys,
    Firstable, thanks for this script it really helped me a lot. Now i have one issue to solve. Everything is working great, as i wanted to, but In end when i save data i dont need the positions i just need the values. Lets say I have dragabble divs with values “cucumber,apple,pinnaple” and i have targets “Vegetable, Fruit”. ANd i need to get in the export: “Vegetable-cucumber, Fruit-apple, Fruit-pinnaple”. Please help me out with this one, I am not really JS master…

    Thanks

12. Hi guys,
    It looks like my post didnt come trough… So I will write again and quick. Thank you a lot for this script it really helped me a lot. Now I just want to ask you, is it possible to get result not like the posiiton in table, but like ids? If I have divs “apple, grapefruit, tomato” and table rows with first cells “vegetabel, fruit” and I want to get results: “fruit – apple, fruit – grapefruit, vegetable – tomato” etc. And another thing, would it be possible to save this to the db (actually this is not problem for me) but then when I reload the page, and read data from db, and automaticaly place those divs into cells, will that be in result as well? since i didnt move it by hand?

    Thanks !
    Tom

13. @Pedro – New REDIPS.drag version is prepared. Please download and try example 10 Sticky tables from the package.

    @Tomas – Do you have working example with fruit/vegetable source elements and 2 rows destination table? You only need a custom “save” function to scan destination table and prepare query string. If you can send me zip or show HTML page with your tables – I will try to create “save” function.

14. Hello dbunic,
    I am working on the floor configurator and i want to implement the drag and drop feature on this configurator. if you see on the link given on the website you see what i mean. i want to drag the image that are in the iframe and drag it over the main prarent designer.

    Is that possible using your drag and drop library.

    Thanks.

    Arvind.

15. @Arvind Jain – Yes it is possible to drag shapes to the main table. As I peeked to the HTML source, my suggestion will be to use block elements (like DIV) for page layout instead of table. You can find a lot of reasons why Web Page Layouts Shouldn’t Use Tables and the last reason is because REDIPS.drag may not work proper. REDIPS.drag scans tables in DIV id=”drag” to calculate “dropping” positions. In case with nested tables, it’s hard to distinguish table as layout from table needed for REDIPS.drag … In redips2.tar.gz package you will find several examples with DIV layout that may be used as a base for building HTML page. Hope this hints will be useful for you. Bye!

16. Hello guys from redips.net,
    i just wanted to tell you that there is something wrong with the latest update. The problem has something to do with the save content function.

    I modified the example 03 with a click button that calls the function save() like in example 01 when you click on it. In the save function iam alerting the returned cotent from the table1.

    When you drag an drop a element from example 03 of the left table to the school schedule which is the right table and then click on the save button, everythings works fine. But when you move the before dropped element to an another cell and then click on the save button the save_content functions is alerting not just the only element of the right table with the new row and column, it is returning also the elements of table 1.

    could you tell me where the problem is. Thanks

    Harrison

17. @Harrison – Yes, latest release has a bug. I build automatic sort of tables array according to clicked DIV element. It should have better performance but I missed to check save_content() function. I will try to fix it as soon as possible – in a day or two. Thank you for submitting problem description. Cheers!

18. New version 2.7.1 – bug fixing!

    @Harrison – Bug in save_content() is fixed. Please try to download latest version and let me know if everything works as expected.

    @Tomas – Text selection inside DIV id=”drag” is fixed for IE7 / IE8.

19. Hi darko,

    now everything works fine great thank you very much for the great work.

    Harrison

20. is there a way to have a drag and drop option on rows, from one table to another table with php backend.