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.

Table 1
Table 2

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 move_object(). 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
// move element with id="a1" to the current location and after
// animation is finished display alert "Finished"
    id: 'a1',
    callback: function () {
// move element with id="a2" to the first table, second row and third cell
    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.move_object({
          mode: 'row',            // animation mode - row
          source: [0, 0],         // source position (table index and row index)
          target: [0, 6],         // target position
          callback: enable_button // function to call after animation is over

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


26 comments on “Drag and drop table content plus animation

  1. Hi. I needed to drop you a quick notice to express my thanks. Ive been following your blog for a month or so and have picked up a ton of excellent info and enjoyed the strategy youve structured your site. I am making an attempt to run my very personal blog however I think its too normal and I must give attention to loads of smaller topics. Being all issues to all folks is not all that its cracked as much as be

  2. I do agree with all the ideas you have offered to your post. They are really convincing and can definitely work. Nonetheless, the posts are very quick for newbies. May just you please lengthen them a bit from next time? Thanks for the post.

  3. Nice post. I be taught something tougher on totally different blogs everyday. It can always be stimulating to learn content material from different writers and observe slightly something from their store. I’d choose to make use of some with the content on my blog whether or not you don’t mind. Natually I’ll give you a link on your net blog. Thanks for sharing.

  4. Hello just thought i would tell you something.. This is twice now i’ve landed on your blog in the last 3 weeks looking for totally unrelated things. Spooky or what?

  5. Good method of describing, and pleasant post to obtain facts on the main topic of my presentation subject material, which my goal is to deliver within school. Joe also called tuskaley.

  6. Somebody necessarily lend a hand to help to make seriously content I’d express. This is the first time I used your web page and thus far? I surprised using the analysis you created to make this type of publish amazing. Fantastic job!

  7. But a smiling visitor here to share the love (:, btw great design and style. “Better by far you should forget and smile than that you should remember and be sad.” by Christina Georgina Rossetti.

  8. You could definitely see your expertise in the paintings you write. The world hopes for more passionate writers such as you who are not afraid to mention how they believe. All the time go after your heart.

  9. Helpful info. Fortunate me I found your web site accidentally, and I
    am surprised why this coincidence did not happened in advance!
    I bookmarked it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s