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
|
|||||
drop
|
|||||
table
|
|||||
rows
|
with
|
REDIPS
|
|||
and
|
|||||
lib
|
Table 2 | |||||
---|---|---|---|---|---|
Drag
|
|||||
drop
|
|||||
table
|
|||||
rows
|
with
|
REDIPS
|
|||
and
|
|||||
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 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 rd.init(); // move element with id="a1" to the current location and after // animation is finished display alert "Finished" rd.move_object({ id: 'a1' , callback: function () { alert( 'Finished' ); } }); // move element with id="a2" to the first table, second row and third cell rd.move_object({ 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.
i like what you’ve done
I’ve said that least 923047 times. SCK was here
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
There is visibly a bundle to know about this. I feel you made some good points in features also.
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.
Heya i am for the first time here. I came across this board and I find It truly useful & it helped me out a lot. I hope to give something back and aid others like you aided me.
Shareyt – Your Social Sharing Hub! Social media marketing simplified http://shareyt.com/?r=11294 improve social media presence for FREE
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.
You are my inspiration , I have few web logs and often run out from to post .
I see something truly special in this internet site.
But a smiling visitor here to share the love (:, btw outstanding design and style. “Competition is a painful thing, but it produces great results.” by Jerry Flint.
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?
I reckon something really special in this site.
I really like your web design, did an individual create this from your self or even pay an internet site designer to complete it?
Very cool article. Truly thank you! Really great.
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.
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!
Superb read, I just passed this onto a friend who was doing a little research on that. And he actually bought me lunch because I found it for him smile So let me rephrase that: Thanks for lunch!
Hey, you used to write wonderful, but the last several posts have been kinda boring… I miss your super writings. Past several posts are just a little bit out of track! come on!
Absolutely indited articles, Really enjoyed studying.
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.
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.
Les annonces sont gratuites sur Portail2000.com/ venez mettre votre annonce sur portail2000, l’inscription est gratuit.
Petites annonces gratuites d’occasion Portail2000.com/ des annonces immobilières, voitures et bien plus encore .
Have you ever wondered how you could help those who are less fortunate than you?
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.