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

21 Responses to Drag and drop table content plus animation

  1. dbunic says:

    @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.

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!