Migration guide for REDIPS.drag version 5+

REDIPS.drag version 5 has major name changes in properties, methods and event handlers. Here you will find listed old and new names so migration to version 5 should not be a problem. Main intention for this change was to have consistent names of properties, methods and event handlers.

Following Google JavaScript convention and the fact that large majority of JavaScript developers use the camelCase syntax, REDIPS.drag library from now uses the same JavaScript style.

A good JavaScript style document can be also read at JavaScript Style Guide page.

Properties
Old name (Version 4) New name (Version 5+)
animation_pause animation.pause
animation_shift shift.animation
animation_step animation.step
autoscroll scroll.enable
border style.borderEnabled
border_disabled style.borderDisabled
bound scroll.bound
current_cell td.current
clone_shiftKey clone.keyDiv
clone_shiftKey_row clone.keyRow
delete_cloned clone.drop (inverted)
delete_shifted deleteShifted
drop_option dropMode
hover.color_td hover.colorTd
hover.color_tr hover.colorTr
hover.border_td hover.borderTd
hover.border_tr hover.borderTr
multiple_drop multipleDrop
obj_old objOld
opacity_disabled style.opacityDisabled
previous_cell td.previous
row_empty_color style.rowEmptyColor
row_position rowPosition
save_pname saveParamName
source_cell td.source
speed scroll.speed
shift_after shift.after
shift_option shift.mode
table_sort tableSort
target_cell td.target
trash_ask trash.question (boolean -> string)
trash_ask_row trash.questionRow (boolean -> string)
trash_cname trash.className

Methods
Old name (Version 4) New name (Version 5+)
clone_div cloneObject
delete_object deleteObject
empty_cell emptyCell
enable_drag enableDrag
enable_table enableTable
find_parent findParent
find_cell findCell
get_position getPosition
get_style getStyle
move_object moveObject
row_empty rowEmpty
row_opacity rowOpacity
save_content saveContent
shift_cells shiftCells

Event handlers
Old name (Version 4) New name (Version 5+)
myhandler_changed event.changed
myhandler_clicked event.clicked
myhandler_cloned event.cloned
myhandler_cloned_dropped event.clonedDropped
myhandler_clonedend1 event.clonedEnd1
myhandler_clonedend2 event.clonedEnd2
myhandler_dblclicked event.dblClicked
myhandler_deleted event.deleted
myhandler_dropped event.dropped
myhandler_dropped_before event.droppedBefore
myhandler_final event.finish
myhandler_moved event.moved
myhandler_notcloned event.notCloned
myhandler_notmoved event.notMoved
myhandler_relocated event.relocateEnd
myhandler_row_changed event.rowChanged
myhandler_row_clicked event.rowClicked
myhandler_row_cloned event.rowCloned
myhandler_row_deleted event.rowDeleted
myhandler_row_dropped event.rowDropped
myhandler_row_dropped_before event.rowDroppedBefore
myhandler_row_dropped_source event.rowDroppedSource
myhandler_row_moved event.rowMoved
myhandler_row_notcloned event.rowNotCloned
myhandler_row_notmoved event.rowNotMoved
myhandler_row_undeleted event.rowUndeleted
myhandler_switched event.switched
myhandler_undeleted event.undeleted

10 thoughts on “Migration guide for REDIPS.drag version 5+”

  1. I have used the following code to do a shift style drag and drop:

    REDIPS.drag.dropMode = 'shift';
    REDIPS.drag.init();
    REDIPS.drag.trash.question = '';
    REDIPS.drag.event.clicked = function (cucl) {
        myomy = cucl.offsetWidth;
    }
    REDIPS.drag.event.moved = function () {
        REDIPS.drag.obj.style.width = String(myomy - 6) + 'px';
    }
    REDIPS.drag.event.dropped = function (cucl) {
        REDIPS.drag.obj.style.width = '';
    }
    

    Here is my HTML:

    <table class="ranktables" id="drag">
    <tr>
        <td>
            <table class="ranksource">
                <tr>
                    <td>
                        <div mjvl="0007" class="drag">The colour of the case</div>
                    </td>
                </tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td>
                </tr>
            </table>
        </td>
        <td width='50'></td>
        <td>
            <table class="ranktarget">
                <tr>
                    <td id="Q13_RANK_1">
                        <div mjvl="0001" class="drag">The cost to purchase</div>
                    </td>
                    <td class="mark anot">Most Important</td>
                </tr>
                <tr>
                    <td id="Q13_RANK_2">
                        <div mjvl="0002" class="drag">The protection for my phone</div>
                    </td>
                    <td class="mark anot"></td>
                </tr>
                <tr>
                    <td id="Q13_RANK_3">
                        <div mjvl="0005" class="drag">The material the case is made from</div>
                    </td>
                    <td class="mark anot"></td>
                </tr>
                <tr>
                    <td id="Q13_RANK_4"></td>
                    <td class="mark anot"></td>
                </tr>
                <tr>
                    <td id="Q13_RANK_5">
                        <div mjvl="0006" class="drag">The overall look of the case</div>
                    </td>
                    <td class="mark anot"></td>
                </tr>
                <tr>
                    <td id="Q13_RANK_6">
                        <div mjvl="0008" class="drag">Recommendation from friends or family</div>
                    </td>
                    <td class="mark anot"></td>
                </tr>
                <tr>
                    <td id="Q13_RANK_7">
                        <div mjvl="0003" class="drag">The company that actually makes the case</div>
                    </td>
                    <td class="mark anot"></td>
                </tr>
                <tr>
                    <td id="Q13_RANK_8">
                        <div mjvl="0004" class="drag">The brand that is shown on the case if any</div>
                    </td>
                    <td class="mark anot">Least Important</td>
                </tr>
            </table>
        </td>
    </tr>
    </table>
    

    I have some cells with class=”mark anot” where anot is my annotation class. Your new version shifts items into these cells despite their class having “mark”. Is this because the cells have 2 classes? This needs fixing! TIA.

  2. Hi,
    Thanks a lot for the library!!!!
    I would like to ask the user what he would like to do when dragging div to an occupied cell just when he lives the mouse.
    is it possible ?

  3. Hi Darko!
    First of all I would like to say thanks for the library!

    Now, I would like to ask… Is there a way to move around more than one DIV from one cell to another?
    Example, mark several cells and move/drag/drop them into another place.
    (I dont want them to be dropped into the same cell however, i want them copied from one place to another).

    Is there any example like this?

    Any help would be appreciated!

    Thanks once again!

  4. @Dimman – Please see example12 Select and move more elements. In script.js file you will see event.dropped() handler and REDIPS.moveObject() method. In short, after DIV element is dropped to the table, code will search for other checked DIV elements and with moveObject() they will be moved to the destination cell. Hope this example will be helpful for your case.

  5. Hi
    I basically want to create a playlist using your drag drop script.
    have you got an example or pointers on how to update and display the order in a textbox / div, within all of the drag divs, once one is dropped.

    Cheers

  6. @Andy – For playlist app, maybe example 14 Sort elements in long table can be a good start point. You will have to create table as layout (for song order) and write song titles to the DIV elements. Please take a look to the Example 21 Shift table content also.

    Hope this examples will give you an idea how to start with your application.
    Cheers!

Leave a Comment