Demo is based on REDIPS.drag JavaScript library with enabled shift drop option. After element is dropped to the cell, other elements will be shifted to make room. Animation is optional and can be turned off. The presented demo can be a good start point for various sorting Web applications.
|
A
|
B
|
C
|
D
|
E
|
F
|
|
G
|
H
|
I
|
J
|
K
|
L
|
|
M
|
N
|
||||
|
O
|
Q
|
||||
|
C
|
Trash |
Shift content (after element is deleted)
Show confirm delete dialogShift options:
horizontal 1 – element shift can affect more rows
horizontal 2 – each row is treated separately
vertical 1 – element shift can affect more columns
vertical 2 – each column is treated separately
Boolean public property shift_animation defines whether shift animation will be turned off or on. Default is off and table content will be shifted instantly. If animation is turned on, then dragging will not be possible while animation lasts. This was needed to prevent possible collisions between animation and dragging.
Drag and drop DIV element inside the same table will actually sort table content. Table content will be shifted to left or to the right side. If new element is dropped to the table, then table content will be shifted to the right. Repeating will result with accumulation of DIV elements in the bottom last table cell. Here is JavaScript code needed for shift table content:
var redips_init, toggle_animation, toggle_shift_after, toggle_confirm, counter = 0;// redips initializationredips_init = function () { // reference to the REDIPS.drag library var rd = REDIPS.drag; // initialization rd.init(); // set drop option to "shift" rd.drop_option = 'shift'; // enable animation on shifted elements rd.animation_shift = true; // set animation loop pause rd.animation_pause = 20; // do not ask on delete rd.trash_ask = false; // add counter to cloned element name rd.myhandler_cloned = function () { // increase counter counter++; // append to the DIV element name rd.obj.innerHTML += counter; };};// set shift optionshift_option = function (radio) { REDIPS.drag.shift_option = radio.value;};// enable / disable animationtoggle_animation = function (chk) { REDIPS.drag.animation_shift = chk.checked;};// enable / disable shift after element is deletedtoggle_shift_after = function (chk) { REDIPS.drag.shift_after = chk.checked;};// toggles trash_ask parameter defined at the toptoggle_confirm = function (chk) { REDIPS.drag.trash_ask = chk.checked;};// add onload event listenerif (window.addEventListener) { window.addEventListener('load', redips_init, false);}else if (window.attachEvent) { window.attachEvent('onload', redips_init);} |
Label of cloned elements is increased on every element cloning. Please see how myhandler_cloned event handler was used. REDIPS.drag has many event handlers hooked in different stages to simplify needed customization.
Rz Rasel 