Drag and drop table content plus animation

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.


REDIPS.drag example17

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.

24 thoughts on “Drag and drop table content plus animation”

  1. @Phil – In one time user can drag one DIV element. If you need to clone two DIV elements at a time, please see example Example 18: Simple element animation. In this example is possible (with some JS logic) to clone more than one DIV element and to place it on TABLE cells. You will have to know destination cell for such action. Maybe example Example 12: Select and move more elements will be also useful for your case.

  2. @dbunic
    Sorry to question you once more. Do you think it might be possible to combine REDIPS.drag and REDIPS.table lib in a way that you drag it to a field. As soon as you drop it. you can check if this and the following are free and then merge this two together so as it seems you moved two cells? (hope I described it the in a understandable way :-) )

  3. @Phil – REDIPS.drag and REDIPS.lib are designed to “work” together. Please jsFiddle example that shows simple case with these two libs:

    http://jsfiddle.net/dbunic/cexn1wvn/

    You can click on a cell to mark it and then cells can be merged or split (with click on a button). So, this functionality can be written inside event handler like you asked. This way, cell merging will be executed on DIV drop.

    Hope this hint will be useful and if you have additional question, please be free to ask.

  4. Mr. dBunic
    is it posibble to limit the redips-rowhandler so it will move just 3 row of entire row?

Leave a Comment