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. Is there a way to limit dragging to the same column? For example, I have a table with three columns of Name, Address and Email. I want to limit the name dragging only to other name cells and the same with address and email.

    thanks,

    Mike

  2. @Mike – Table cells in columns (as well as anywhere on the table) can have dropping rules. For example, some cell can be marked with only class name to allow/accept only defined DIV elements. In your case, cells in first column will have the same “only col1” classes, while cells in second columne may have “only col2” etc. After table cells are defined, the following JS line will define dropping rule:

    // define cells with class="col1" to accept only DIV elements with id="a1"
rd.only.div.a1 = 'col1';

    In section 4 you can find more informations about only class name.

  3. I’m not able to get this to work.I tried my table cells like this

    <td class="only address">
	<div id="address" class="drag">
		242 South Belvoir Blvd  South Euclid Ohio 44121
	</div>
</td>
<td class="only email">
	<div id="email">
		<div class="drag">
			MRJ@ATT.NET
		</div>
	</div>
</td>

    My JavaScript looked like this

    var rd = REDIPS.drag;
rd.init('email');
rd.init('address');
rd.only.div.address('address');
rd.only.div.email('email');

    That does not allow me to drag the cells. If I put the div id around the whole table than I can drag but not drop into the column.

    Basically, I’m trying to get the cells in the ’email’ column to be allowed to drag and drop into the email column and the cells in the address column to be only dropped into the address column. I’m not sure how to define the drag div ID to do this.

    I’ve read through your examples and didn’t see anywhere that you limited a column to itself.

    Mike

  4. @Mike – Tables should be closed within drag container so REDIPS.drag can properly scan tables and table cells. Here is example of HTML (table with two columns email and address):

    <!-- drag container -->
<div id="drag">
    <!-- table -->
    <table id="table2">
        <colgroup>
            <col width="100"/>
            <col width="100"/>
        </colgroup>
        <tbody>
            <tr>
                <td class="only email">
                    <div id="e1" class="drag">email1</div>
                </td>
                <td class="only address">
                    <div id="a1" class="drag">address1</div>
                </td>
            </tr>
            <tr>
                <td class="only email">
                    <div id="e2" class="drag">email2</div>
                </td>
                <td class="only address">
                    <div id="a2" class="drag">address2</div>
                </td>
            </tr>
            <tr>
                <td class="only email"></td>
                <td class="only address"></td>
            </tr>
            <tr>
                <td class="only email"></td>
                <td class="only address"></td>
            </tr>
        </tbody>
    </table>
</div>

    Both columns are marked with only class names. Second class name is needed for applying rule in JavaScript. As you can see, each column has two DIV elements: email1, email2 and address1, address2 with their id e1, e2 and a1, a2 respectively. Script with this example is rather simple:

    // reference to the REDIPS.drag
var rd = REDIPS.drag;
// initialization
rd.init();
// define "only" cells with class="address" to accept
// DIV elements with id="a1" and id="a2"
rd.only.div.a1 = 'address';
rd.only.div.a2 = 'address';
// define "only" cells with class="email" to accept
// DIV elements with id="e1" and id="e2"
rd.only.div.e1 = 'email';
rd.only.div.e2 = 'email';

    This way, email1 and email2 will be able to drop only to the first column while address1 and address2 to the second column.

  5. Thanks for your fast replies.

    The problem I ran into was I was using

    <div id="e1" class="drag clone">

    When I remove clone from the class, it works great… except I need to clone and replace the contents in the drop cell.

  6. @Mike – the problem with clone element is related to fact that every element on the HTML page should have unique id attribute. So, if original element has id=”a” then first cloned element will get id=”ac0″, second id=”ac1″ and so on. To set dropping rules you should predict how many DIV elements will be cloned or use a simple script inside event handler. Here is how (similar code can be found in example07 A B C D / E F):

    // event handler invoked after element is cloned
rd.myhandler_cloned = function () {
    // set id of cloned element
    var cloned_id = rd.obj.id;
    // switch depending first letter and set dropping rule for cloned element
    switch (cloned_id.substr(0, 1)) {
    case 'a':
        rd.only.div[cloned_id] = 'address';
        break;
    case 'e':
        rd.only.div[cloned_id] = 'email';
        break;
    }
};

    This code will automatically append dropping rule for every cloned element in above example (in case if some of DIV elements are declared as “clone” type).

  7. Quisiera poder desabilitar el drop cuando se coloque un nombre igual al que ya esta insertado en la celda, es decir que no se repita los nombre en una celda… solo que se pueda dejar caer nombres disitintos

    Muchas gracias

  8. @Alex Machado – First I don’t speak spanish so I used translate.google.com to help me. Hope your question is how to disable dropping DIV element to the table cell which contains the same DIV element. For such case, you can use myhandler_dropped_before(target_cell) event handler and test DIV elements inside target_cell. If JS code inside event handler detects the same DIV element, it is only needed to return false and dropped DIV element will be returned to the source table cell.

  9. Hi Dbunic

    Great work you have done with this.
    When updating on remote screen i use:
    move:id:xpos:ypos

    Is there any way to remove and add elements on remote screen the same way …
    perhaps add and trash ?

    Cannot seem to find any info on it here on the website..
    Thanks

  10. @Lars Andersen – Since version 4.6.17, options clone and overwrite have been added to the move_object() method. So, it’s possible to clone DIV element remotely:

    // clone DIV element with reference "mydiv", move to the first table,
// second row, third cell and overwrite all content in target cell
rd.move_object({
    obj: mydiv,
    clone: true,
    overwrite: true,
    target: [0, 1, 2]
});

    If you want to remove DIV element from the table you can use removeChild() DOM method:

    // define reference to the DIV element with id="d1"
var div = document.getElementById('d1');
// remove child from DOM (DIV element still exists in memory)
div.parentNode.removeChild(div);

    I hope this tips will be helpful.

  12. @Zurol S. – I didn’t try to save DIV moves to the cookies but I guess it’s possible. Although it would be better to save DIV moves to the database via AJAX. After dropping DIV element to the cell, event handler can fire AJAX call with DIV id and target cell coordinates. This approach will work for sure.

  13. I am trying to have a TD element have a background image that is not draggable and then have a DIV element be able to be put in the TD and the DIV element sits ON TOP OF the background image. I got it working EXCEPT for them to stack on top of each other, they instead stack.

    I tried to take the image out of a DIV tag and it did not make a difference. Is there a way to do this?

    Here is a snippet of the code.

    I used the sample 7 code for the a, b, c, d DIV.

    <td>
    <img width="100%" height="100%" class="type7" src="./images/Wall_stone_grey_VL.PNG">
</td>

  14. Answering my question but I hope there is still another way.

    I use TD with the BACKGROUND attribute. Now I just need to make the moveable transparent. However, I can’t rotate the image on the BACKGROUND tag. I don’t really want to have another image just for a 90deg rotation if I can avoid it.

  15. @AC – You can place background image to the TD by using CSS. SRC attribute from HTML has to be removed:

    <td>
    <img width="100%" height="100%" class="type7">
</td>

    … and add background-image style to the type7 class:

    .type7 {
    ...
    ...
    background-image: url(./images/Wall_stone_grey_VL.PNG);
}

    Initially, TD will be tiled with defined image. This can be turned off with background-repeat and image position can be set with background-position style. Here is a good CSS tutorial for all background CSS styles:

    http://reference.sitepoint.com/css/background-image

    Hope this trick will solve the problem, cheers!

  16. Thanks. I found that the CSS background-image would not get applied to the img tag. But, it works for the TD tag and the CSS3 transform will still allow me to rotate the image and it looks to work both in Firefox and IE. Also IE treated the img tag in an undesirable way anyway. Thank you.

  17. @AC – I made a mistake, instead of applying style to the TD I wrote IMG tag – Mea Culpa. Image inside TD is not needed at all. Here is corrected HTML:

    <td class="type7"></td>

    Anyway, I’m glad you solved the problem and thank you for the feedback.

  18. Thanks, I appreciate the insights and help. Your library is making things a lot easier.

    An issue I have found using the following css on the TD. The DIV that gets placed on this TD gets rotated 90deg and then when I drag it off it moves off at a 90deg offset. Going to try remove the class in javascript to see if I can get it to not do that.

    .turn90 {
    -moz-transform: rotate(90deg);
}

  19. Ok, I “fixed” it by adding and removing the turn90 class from the TD tag during the myhandler_dropped event. I get a bit of movement as the image rotates, but I can live with that.

    Thank you for having the source_cell and target_cell. Your library API is very well designed. It shows how well you have thought it out.

  20. @AC – I’m glad that your issue has been resolved and thanks for posting a solution.

    REDIPS.drag is under continuous developing. Many suggestions from users are systematized and buit-in to the library so I hope REDIPS.drag will be even better in the future.

    It all started from publishing a 100 JavaScript lines ;)

Leave a Comment