JavaScript drag and drop plus content shift

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
Animation
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 initialization
redips_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 option
shift_option = function (radio) {
    REDIPS.drag.shift_option = radio.value;
};
// enable / disable animation
toggle_animation = function (chk) {
    REDIPS.drag.animation_shift = chk.checked;
};
// enable / disable shift after element is deleted
toggle_shift_after = function (chk) {
    REDIPS.drag.shift_after = chk.checked;
};
// toggles trash_ask parameter defined at the top
toggle_confirm = function (chk) {
    REDIPS.drag.trash_ask = chk.checked;
};
// add onload event listener
if (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.

This entry was posted on October 18, 2011 and is filed under Drag and Drop, JavaScript

Related posts

Advertisements
By Rz Rasel Posted in jQuery

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s