REDIPS.drag documentation

39 Responses to REDIPS.drag documentation

1. Steve says:

   07.09.2011. at 14:00

   Please help. I am trying to get the undelete to function. I have looked over you examples and have not been able to figure out how to restore the item back to its original cell when the user cancels a delete.

   Thanks,
   Steve
2. dbunic says:

   07.09.2011. at 14:16

   @Steve - In a moment when element is dropped to the Trash cell, DIV element is deleted from DOM. Please find the following lines in redips-drag.js file (line 975):

   // remove child from DOM (node still exists in memory)
   obj.parentNode.removeChild(obj);
   

   Browser will delete DIV element but element will still exist in memory. It is only important to remeber reference to the delete element. If user decides to cancel element deletion, element can be appended to the previous table cell (or any other element in DOM). Here is how:

   // append removed object to the source table cell
   tables[table_source].rows[row_source].cells[cell_source].appendChild(obj);
   

   Hope this short info will be helpful to you.
   Cheers!
3. Omkar says:

   25.09.2011. at 21:01

   This is brilliant stuff. I've seen this just today and its my bad luck that I haven't seen it last month, when I started a jquery dragndrop application and now I'm stuck with it - not able to customize it to my needs. This just fits like a glove. Many many thanks

   But I'd like to know if there is a way to customize a table as a drop zone such that when the cloned drag item is dropped on the table (in this case the entire drop-zone-table would be highlighted), it'll align itself into the first empty td. Please guide me through.
4. dbunic says:

   26.09.2011. at 09:09

   @Omkar - Table can be customized as a drop zone. In a code below, red border will show selected table. You can easily modify this code to change background color of whole table. As you certainly know, background color of table cell has higher priority, so this implies that your table should not have defined table cell color.

   /* set border for tables */
   #drag table {
       border: 2px solid white;
   }
   

   var redips_init,
       clear_border,
       tables;
   
   // REDIPS.drag initialization
   redips_init = function () {
       // reference to the REDIPS.drag library
       var rd = REDIPS.drag;
       // set reference to all tables within DIV "drag"
       tables = document.getElementById('drag').getElementsByTagName('TABLE');
       // initialization
       rd.init();
       // my handler changed
       rd.myhandler_changed = function (cell) {
           // define current table
           var current_table = rd.find_parent('TABLE', cell);
           // clear border from all tables
           clear_border();
           // set border color for selected table
           current_table.style.borderColor = 'red';
       };
       // my handler dropped
       rd.myhandler_dropped = function () {
           // clear border from all tables
           clear_border();
       };
   };
   
   // clear border from all tables
   clear_border = function () {
       var i;
       for (i = 0; i < tables.length; i++) {
           tables[i].style.borderColor = 'white';
       }
   };
   
   // add onload event listener
   if (window.addEventListener) {
       window.addEventListener('load', redips_init, false);
   }
   else if (window.attachEvent) {
       window.attachEvent('onload', redips_init);
   }
   

   After element is dropped to the highlighted table, it can be relocated to the first empty table cell. You will need to create a function that will return empty cell and with relocate() method dropped element can be moved to desired destination.
5. Jim says:

   20.10.2011. at 15:21

   Excellent script with great documentation! Already used it in one project and now working on another. Wondering if it is possible to set clone to automatically execute without having to use shift key?
6. Jim says:

   20.10.2011. at 15:24

   Actually, I now see the tic-tac-toe example which is what I'm trying to achieve. Will take a closer look to see if I can do it. thanks!
7. Chris says:

   21.10.2011. at 04:50

   Update the hover_color property

   Documented online as:
   // set "#9BB3DA" as hover color
   REDIPS.drag.hover_color('#9BB3DA');

   Correction needed:
   REDIPS.drag.hover_color = '#9BB3DA';
8. dbunic says:

   21.10.2011. at 08:06

   @Jim - To enable element cloning it is only needed to define "clone" class name next to "drag" class name. Here is example for DIV element:

   <div id="cln" class="drag clone" title="infinite cloning">Clone</div>
   

   @Chris - Thank you, documentation for hover_color is corrected.
9. He-Man says:

   05.11.2011. at 14:32

   I'm looking to adapt one of your examples to create a table with the following properties.
   -- When a cell at position (a,b) is dragged onto a another cell at position (x,y)
   -- The rows and columns swap position such that
   -- row_a and row_x are swapped
   -- column_b and column_y are swapped

   Which example do you think I should work off of? Thanks!
10. dbunic says:

    05.11.2011. at 17:03

    @He-Man - I suppose that you want to swap content of rows and columns. Maybe the best example to start would be example17 "Move object (animation)" and example18 "Simple element animation". In a moment when DIV element is dropped from position [a,b] to position [x,y], JavaScript function should move elements in row and column. You should open loop for each cell in row "a" and move element to row "x" and vice versa. After row content is swapped, the same process for swapping columns can be started. The main trick is to create loops for rows and columns. I would also include counter for moved elements to wait last DIV element in row content swapping. It isn't so simple but it isn't impossible. If you have basic JavaScript skills, you will be able to create this example.
11. Ramon Pena says:

    07.11.2011. at 21:45

    You have done a great job with this library!

    I am starting to customize it for a project and I cannot find how to limit drag and drop of some divs to specific cells; In my project I will have two set of tags(divs) in the left area of a page; one set for Materials and set for Packages; in the right area of the page I will have a table with some empty rows where the user will drop Tags to create a sequence; I want to allow these tags to be cloned but the materials tags will only be allowed to be dropped inside the materials cells while the Package tags will be allowed in all the cells. It is similar to your School timetable example but imagine you would like to limit 'History' and 'English' to be dropped only in the cells after lunch or only on Mondays and Fridays cells. I have been trying to do it with the Only property that the library have for that without success.

    Thanks.
12. dbunic says:

    08.11.2011. at 19:10

    @Ramon Pena - A new example is prepared Example07: E F. It contains two types of elements: E and F. E elements can be placed everywhere while F elements can be placed only to the bottom cells. Hope this example will be a good start point so you can continue with your project.

    And thank you for supporting my work, it's very appreciated.
    Cheers!
13. Ramon Pena says:

    09.11.2011. at 01:05

    Thanks for your prompt answer Darko; I got another question for you hoping you can help me with this one too:

    Is there a way to avoid that rows from one table are dropped to another table? In my project I have a table that will have a nested table in one of its rows and I want to enable functionality to drag and drop rows but only within the same table, and I need drag and drop rows enabled for both tables, the inner and the outer one; I also want to prevent the highlighting of the cells that your library does whenever the user drags rows from the inner table over the outer table and vice versa.

    Thanks!
14. dbunic says:

    10.11.2011. at 18:29

    @Ramon Pena - Yes, you can drag and drop rows only within one (or several) tables. In this scenario, dragged element or row could not be placed to other tables. Please take a look to Example 19 - Groups and table rows. Rows in nested tables can be moved only within nested tables while rows of main table can be dropped only to the main table. Tables are marked with different class names and inside myhandler_row_clicked event handler, enable_table() method enables / disables tables. Here is part from script.js file for illustration:

    rd.myhandler_row_clicked = function () {
        // find table
        var tbl = rd.find_parent('TABLE', rd.obj);
        // if row belongs to the "main" table
        if (tbl.className.indexOf('main') > -1) {
            rd.enable_table(false, 'view');
            rd.enable_table(true, 'main');
        }
        // row belongs to the "view" table
        else {
            rd.enable_table(true, 'view');
            rd.enable_table(false, 'main');
        }
    };
    
15. Mark Davies says:

    11.01.2012. at 06:42

    Is there a call to delete a DIV element without dragging it to trash? I would like to have a lot of elements in the table and use visibility to select what I want and then delete those that are hidden or add and option to save to save only those that are visible.

    Thanks,
16. dbunic says:

    11.01.2012. at 11:15

    @Mark Davies - New REDIPS.drag version is published (documentation will be updated later). In version 4.6.6 exists delete_object() public method to delete any DIV element in table. Here is example how to use new method:

    // set REDIPS.drag reference
    var rd = REDIPS.drag;
    
    // delete DIV element in myhandler_dropped() event handler
    rd.myhandler_dropped = function () {
        rd.delete_object(rd.obj);
    }
    
    // delete DIV element with id="d1"
    rd.delete_object('d1');
    
17. John says:

    29.01.2012. at 09:16

    Hi,
    i am working on a drag and drog module for my jsp project.
    This suit my needs. lets say i save the state in my db. Can you tell me, once we retrieve it from the data, how can we display it back to what it should look like?
18. dbunic says:

    29.01.2012. at 12:15

    @John - REDIPS.drag contains simple save_content() method. Element ID and coordinates will be prepared to sent with URL. Please peek to the Example 3: School timetable where is implemented saving to database (preview version is static and without server side communication). Iniside example03 directory you will find instructions in readme.txt and database.sql to create two simple tables.
19. Anthony says:

    09.02.2012. at 15:41

    Is it possible to drag and drop entire columns in the same way that you can drag and drop entire rows?

    Sorry another question, how would you configure two DIVs for drag and drop so that items (rows) from one DIV element cannot be dropped into the DIV element. The second DIV element is a child to the the first DIV.
20. dbunic says:

    09.02.2012. at 19:00

    @Anthony - REDIPS.drag currently doesn't have functionality for column dragging. It is in my plans when I will have more free time - hopefully during this year.

    And your second question - DIV element can only be dropped to table cell not to other DIV element, so can you please clarify your question. Anyway, here are few REDIPS.drag options:
    - DIV elements can be cloned
    - drop option can be defined as single (only one DIV element can be dropped to the table cell)
    - table can be placed to separated containers (elements from first table can't be dropped to second table)
    - table cell can be marked to accept only certain DIV element
    - table cell can be marked as forbidden
    ...