Migration guide for REDIPS.drag version 5+

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. @Mark – In latest REDIPS.drag version 5.0.1, shift method now takes care about table cells marked with class=”mark”. Please see example 21 “Shift table content”:

   http://www.redips.net/my/preview/REDIPS_drag/example21/

   Hope this will be fine. ;)

3. 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 ?

4. @Adam – please see answer on JavaScript Drag and Drop example 6 post.

5. 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!

6. @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.

7. Thanks! :)

8. @Dimman – No problem and I hope example12 was helpful for your case. Cheers!

9. 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

10. @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!