REDIPS.drag documentation – Appendix A

Here is list of keywords (mostly class names) used in REDIPS.drag library. Id of drag container(s) or table cell class names should be named properly to achieve needed functionality like cloning DIV elements, adding trash cell, mark cells, adding row handler or mark table as “nolayout”. This post is appendix to the REDIPS.drag documentation post.

Keywords
  1. redips-drag
  2. redips-clone
  3. redips-mark
  4. redips-only
  5. redips-single
  6. redips-trash
  7. redips-rowhandler / row
  8. redips-nolayout
  9. redips-noautoscroll
  10. redips-nodrag

Before going to keywords details, make sure that HTML file has DOCTYPE definition at the top. This will switch browser to the strict mode needed for drag and drop functionality – otherwise REDIPS.drag library will not work properly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1. redips-drag
drag is one of the most important keywords. It is used as default name for drag container and for marking DIV elements as drag-n-drop elements. During initialization, REDIPS.drag searches inside the drag container for every DIV element with redips-drag class name and assigns onmousedown event handler. First, here is example of how to create drag container:

<div id="redips-drag">
    <!-- table1 -->
    <table>
     ...
    </table>
    <!-- table2 -->
    <table>
     ...
    </table>
</div>

Any table within drag container will become drag-n-drop layout. The most common problems and questions I received in using REDIPS.drag library are related to drag container size. If width and height CSS properties of drag container are not properly set and inner table comes out of drag container borders then dragged DIV element will not “see” exceeded cells. Good rule is to make drag container visible in customization process of REDIPS.drag library to avoid mentioned problem:

#redips-drag {
    border: 1px solid lime;
}

Next main role of redips-drag keyword is to mark DIV elements as drag elements. Every DIV element inside drag container will be able to drag and drop if drag is in class names list.

<!-- simple DIV drag element -->
<div class="redips-drag">Drag1</div>

<!-- DIV element contains two class names -->
<div class="redips-drag green">Drag2</div>

And finally, it’s possible to have more drag containers. Elements from first drag container can’t be dropped to second drag container and vice versa.

<!-- first drag container -->
<div id="my-drag1">
    <table>
     ...
    </table>
</div>

<!-- second drag container -->
<div id="my-drag2">
    <table>
     ...
    </table>
</div>

Initialization of separated drag containers is slightly different because REDIPS.drag should know names of drag containers. Here is code snippet from example08:

// reference to the REDIPS.drag library
var rd = REDIPS.drag;
// DIV container initialization
rd.init('my-drag1');
rd.init('my-drag2');

2. redips-clone
If DIV element contains redips-clone class name then in a moment of dragging a new DIV element will be cloned. Original DIV element will stay in table cell. Here is how to define clone type of DIV element.

<!-- clone DIV element -->
<div class="redips-drag redips-clone">One of Many</div>

Cloning can be further customized with climit1_X and climit2_X class names (X is integer). If needed, number of cloned DIV elements can be limited with adding climit class name. climit1 means that last DIV element will be moveable while in case of climit2 last object will stay in cell as immovable object.

<!-- allow 4 cloned elements -->
<div class="redips-drag redips-clone climit1_4">Clone type1</div>

<!-- allow 3 cloned elements and left original element as immovable in cell -->
<div class="redips-drag redips-clone climit2_3">Clone type1</div>

3. redips-mark
By default, if table cell is marked with redips-mark class name then this table cell will be closed (forbidden) for any DIV element. Simply said, DIV element will not be able to drop to this cell. Here is example of how to mark table cells as closed:

<tr>
    <td class="redips-mark">You</td>
    <td class="redips-mark">can</td>
    <td class="redips-mark">not</td>
    <td class="redips-mark">drop</td>
    <td class="redips-mark">here</td>
</tr>

It is possible to define exceptions for closed cells. For example, table cell can be forbidden for every DIV element except DIV elements with defined “id”.

// allow DIV element with id="g1" to enter to the marked cell with class="green"
rd.mark.exception.g1 = 'green';

Or it’s possible to define exception for all DIV elements with class name “green” to enter to TD defined with class name “green_cell”.

// allow DIV containing class name "green" to enter to the
// marked cell with class="redips-mark green_cell"
rd.mark.exception.green = 'green_cell';

To avoid class name collisions on existing page, redips-mark class name can be renamed with the following property:

// rename "mark" class name to "my_mark"
REDIPS.drag.mark.cname = 'my_mark';

If REDIPS.drag.mark.action is set to “allow”, then dropping will be possible only to the marked table cell. This means that default behaviour is inverted.

// reference to the REDIPS.drag library
var rd = REDIPS.drag;
// allow dropping only to the marked table cells
rd.mark.action = 'allow';

4. redips-only
Table cells marked with redips-only class name can accept only defined DIV elements. Here is example of how to define table cells marked with redips-only class name.

<th class="redips-only last"></th>

Without any additional rule, redips-only table cells will be closed for any DIV element. With the following JS lines, table cells will accept only DIV elements with id=”a” and id=”b”.

// reference to the REDIPS.drag
var rd = REDIPS.drag;
// define table cells with class="redips-only last" to accept only
// DIV elements with id="a" and id="b"
rd.only.div.a = 'last';
rd.only.div.b = 'last';

It’s also possible to set rule for DIV elements with defined class name to enter to “redips-only” table cell. Here is example how:

// only DIV elements with class="redips-drag orange" can be dropped
// to TD with class="redips-only last"
rd.only.divClass.orange = 'last';

Above rules also mean that DIV elements with id=”a” and id=”b” or with class=”redips-drag orange” will not be able to drop to any other table cell. That behaviour defines REDIPS.drag.only.other property with default value set to “deny”. If defined DIV elements are allowed to enter to other table cells then set the following property:

// allow DIV element tied with "only" rule to enter to other table cells
rd.only.other = 'allow';

5. redips-single
Table cell marked with class name redips-single will accept only one DIV element.

<!-- accept only one DIV element to the dark table cell -->
<td class="redips-single dark" title="Single content cell"></td>

6. redips-trash
Table cell marked with class name redips-trash will behave as trash can.

<td class="redips-trash" title="Trash">Trash</td>

It is possible to rename default class name (to avoid class name collisions):

REDIPS.drag.trash_cname = 'redips-bin';

Now trash cell will be defined as follows:

<td class="redips-bin" title="Trash">Trash</td>

7. redips-rowhandler / redips-row
To define row handler it is needed to add redips-row class name to the DIV element and set redips-rowhandler class name to table cell.

<tr>
    <td class="redips-rowhandler"><div class="redips-drag redips-row"></div></td>
    <td></td>
    <td></td>
    <td></td>
</tr>

Table cells marked with class name redips-rowhandler will be closed (or forbidden) for other DIV elements. In other words, DIV elements won’t have access to the “row handler” table cell.

8. redips-nolayout
If table contains redips-nolayout in class name list then it will be treated as ordinary table and other DIV elements will not be able to enter to such table. This option can be handy if you want to put table inside DIV element and drag as any other content.

<table class="redips-nolayout">
 ...
</table>

9. redips-noautoscroll
If class name of scrollable DIV container contains redips-noautoscroll class name then autoscroll option will be disabled.

<!-- drag container -->
<div id="redips-drag">
    <!-- scrollable div container -->
    <div id="sdc" class="redips-noautoscroll">
        <table>
         ...
        </table>
    </div>
</div>

To make DIV container scrollable, it is needed to set overflow to “auto” and position property to something else then default “static”:

/* make sdc DIV container scrollable */
#sdc {
    overflow: auto;
    position: relative;
}

Here is snippet from www.howtocreate.co.uk: Element position with scrolling offsets with explanation why is needed to set CSS position property (to something else then default “static”). If CSS position of scrollable DIV container is not set, then dragged DIV element will not have correct position below mouse pointer.

… make sure that every element with an overflow of anything other than “visible” also has a position style set to something other than the default “static”. This way, they will all appear in the offsetParent chain, and can be easily subtracted in the same loop that adds the offsetLeft and offsetTop.

10. redips-nodrag
If HTML element has “redips-nodrag” class, then dragging will not be able. It can be useful when DIV element contains inner HTML like in example11.

<td class="redips-nodrag">
 ...
</td>

63 thoughts on “REDIPS.drag documentation – Appendix A”

  1. In example 23 is it possible to create a HTML button that will either add or remove all entries from the drop list ?

    Thanks

  2. Do you have an example of inserting a row and making it draggable? Class “redips-rowhandler” is not working for new row.

Leave a Comment