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 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.
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!
@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); }Thank you very much.
omg again tones of code for a simple function...
@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.
Pingback: Working with tables through JS–animations , drag and drop « Kaidanov Tzvi Gregory Technical Issues & Solutions