Drag and drop table content plus animation

More...

This demo is just another example of using REDIPS.drag JavaScript library. Example shows drag-n-drop functionality in combination with animation. Please try to drag DIV elements or table rows and watch the movements in other table. I hope this demo will give you a general picture and show possibilities of REDIPS.drag library.

Table 1
Drag
and
drop
table
rows
with
REDIPS
lib
Table 2
Drag
and
drop
table
rows
with
REDIPS
lib

Tables are closed within separated drag containers so elements from first table cannot be dragged to the second table and vice versa. REDIPS.drag inclusion and initialization will enable drag-n-drop for all elements found inside drag containers (one or many) - and this is just a skeleton. Application logic and rules will be realized inside event handlers (like moving mirrored element from other table or locking movement while animation is not finished).

From version 4.3.0+, table content and rows can be moved to target position not only by dragging but also by using public method moveObject(). In next few examples you can see how DIV element or table row can be moved from source to the target position. Method offers definition of callback function after moving is over.

// reference to the REDIPS.drag class
var rd = REDIPS.drag;
// initialization
rd.init();

// move element with id="a1" to the current location and after
// animation is finished display alert "Finished"
rd.moveObject({
    id: 'a1',
    callback: function () {
        alert('Finished');
    }
});

// move element with id="a2" to the first table, second row and third cell
rd.moveObject({
    id: 'a2',
    target: [0, 1, 2]
});

// move first row and after animation is finished call "enable_button" function
// "move_object" returns Array with references of table_mini and source row
row = rd.moveObject({
          mode: 'row',             // animation mode - row
          source: [0, 0],          // source position (table index and row index)
          target: [0, 6],          // target position
          callback: myEnableButton // function to call after animation is finished
       });

Minimized and gzipped, REDIPS.drag library is less than 10KB. Here is compressed version used in this demo: redips-drag-min.js.jgz. Complete list of public properties and methods is documented on REDIPS.drag documentation page (generated with JsDoc Toolkit). Inside redips2.tar.gz package you will find many examples and well commented source code ready for modification.

This entry was posted on July 13, 2011 and is filed under Drag and Drop, JavaScript

Related posts

19 Responses to Drag and drop table content plus animation

  1. BaneRS says:

    Hey! Awesome scripts and guides.

    Is there any way to show animation while object is reverting to its original position or previous state?
    If I may include example this is exactly what i would like to see:
    http://madrobby.github.com/scriptaculous/draggable/

    That little part can make a huge difference for some developers.

    Thank you in advance!

  2. dbunic says:

    @BaneRS - Here is code for undo option. Just call undo function from button click or any other event.

    // define global variables
    var rd,
        redips_init,
        div = {};
    
    redips_init = function () {
        // reference to the REDIPS.drag library
        rd = REDIPS.drag;
        // initialization
        rd.init();
        // event handler invoked if element is moved from home position.
        rd.myhandler_moved = function () {
            // save element ID and start position to the "div" object
            div.id = rd.obj.id;
            div.position = rd.get_position();
        };
    };
    
    // undo for the last move (function can be called on button click)
    function undo() {
        // move element to the start position
        rd.move_object({
            id: div.id,
            target: div.position
        });
    }
    
    // add onload event listener
    if (window.addEventListener) {
        window.addEventListener('load', redips_init, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onload', redips_init);
    }
    
  3. BaneRS says:

    Thank you very much.

  4. m4gz says:

    omg again tones of code for a simple function...

  5. dbunic says:

    @m4gz - REDIPS.drag library grows because of a lot built-in features. Minimized and gzipped library has size of 10KB so it's not so big ;)

    Anyway, after lib is included in HTML page, with configuration and few JS lines you can have drag and drop functionality. Just place HTML table within <div id="drag"></div> and dropping layout is finished. REDIPS.drag will highlight table cells, shift content, clone DIV elements, apply dropping rules, autoscroll (page and container) and execute JS code in event handlers. If needed, REDIPS.drag lib can be useful.

  6. Pingback: Working with tables through JS–animations , drag and drop « Kaidanov Tzvi Gregory Technical Issues & Solutions

  7. Pingback: Drag and drop table content plus animation | Redips | spideR Net » Web Design

  8. Dipankar says:

    Really great!!!!
    I want a web based file explorer (in tree structure) and drag a file from one directory and drop to another directory. Is it possible?
    Can you help me...

  9. dbunic says:

    @Dipankar - REDIPS.drag is drag and drop library based on HTML table. If you can create filemanager using table then yes - it's possible. You have a lot of event handlers to write custom JS code. For example - in the moment when DIV element is dropped to the cell, event.dropped() will be called. There can be AJAX code launching communication with server side (to save position of dropped DIV element). Inside redips2.tar.gz package you will find many examples ready to start from. If you will have problem during development I will try to help you.

  10. Dipankar says:

    Thanks a lot to you and redips.net....Just I want to confirm that the library supports which browses and version (IE 8/abobe,Mozila firefox,croma etc.). Let me try as per your suggestion and i will get bk to u

  11. Dipankar says:

    thanks dbunic!!!I was trying with Table in Apache Click but not able to do....any advise for me

  12. dbunic says:

    @Dipankar - REDIPS.drag is tested in FF3+, IE8+, Google Chrome 10+, Safari 5+ and Opera 11+. If you find any bug in these browsers I will try to fix the bug.

    Next, please try to start your project from one of the ready examples in package. If you need AJAX communication good examples to start are: example 3 (AJAX version), example16 (a bit complicated), example22 and example23.

    Hope this will be good to start.

  13. Shekhar Jagadale says:

    Hi
    Problem with reverting row to its original position or previous state?

    undo option code is not working ... I have undo function as follows:

    function undo() {
        // move element to the start position
        alert("Current =" + div.id + " hhhh=" + div.position);
        rd.event.rowMoved({
            mode: 'row',
            source: [0, 2],
            target: [0, 6],
        });
    }
    

    There is single table i want to merge two rows. Before merging two rows there is confirmation Yes / No. if user clicks on No button then i want to re-positioning the dragged row to its original positions.
    Unable to reverting row to its original position or previous state. I have undo function as follows..

    Please help me.

  14. George says:

    I want to know if it's possible to somehow emerged two or more cells in the table and then to restore them back to their original condition .

    do you have an example that shows how to do that ?
    Thanks for your library . it was exactly what I was looking for .

  15. George says:

    OK, found it. Thanks.

  16. Elmo Luz says:

    Dear Mr. dbunic,
    Your script from example 18: "Simple element animation (row)" is perhaps the best drag and drop that I've seem this far.
    Please sir, is there a way you could help me save the items position on page refresh or shine the light on how that could be accomplished with your scripts?
    If yes, I would be very grateful, no worries if you must charge.
    Many thanks in advance!

    Regards,
    Elmo Luz

  17. dbunic says:

    @Shekhar - Undo function for row dragging can be achieved by using event.rowDroppedBefore() event handler. Please take a look to the example15/script.js source and there you will find commented the following code:

    rd.event.rowDroppedBefore = function () {
        //
        // JS logic
        //
        // return source row to its original state
        rd.rowOpacity(rd.objOld, 100);
        // cancel row drop
        return false;
    }
    

    This event handler is acctually executed before row will be dropped. In "JS logic" you can write your code and if some condition is true (for cancelling row dropping) then you can set row opacity to 100 and return false. I'm not sure if there can be placed confirm() popup box but you can try and maybe this will work.

    @George - I'm glad that you solved the problem and thanks for using REDIPS.drag library. Cheers!

    @Elmo - Maybe the best start point is example03 School timetable (this is link for static version). You will have to download redips2.tar.gz package and prepare local LAMP server to see how this example works. In example03/docs directory is readme.txt file with detail instructions:

    This example shows how to arrange timetable and save table content to the MySQL database.
    Database communication is written inside config.php which is included in index.php and db_save.php
    
    Inside ajax directory is AJAX variant of this demo without features like printing subjects or spreading
    school objects across week.
    
    Before start using this demo you should:
    1) create two tables: redips_subject and redips_timetable (see database.sql)
    2) define database name, user name and password in config.php
    
    After these steps are finished, empty timetable should appear and you can start drag school subjects.
    
    If you replace script.js with docs/script.js then it will not be possible to have two same school subjects (lessons) in a column.
    See checkColumn() function and where is called.
    

    example03 also contains modification to save each move via AJAX so there is not needed to have explicit "Save" button. Hope this reply will give you enough information to start your project. If you will have any further questions, don't hesitate to ask. The only problem I have is free time ;)

  18. Shekhar Jagadale says:

    @dbunic Sir Thanks a lot to you and redips.net....

  19. dbunic says:

    @Shekhar - No problem, and I'm glad you find it useful.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

In case of posting HTML tags or JavaScript code please convert special characters to HTML entities.
Especially pay attention to convert "<" character to "&lt;" entity!