REDIPS.drag example 2

Drop and clone DIV elements

by Darko Bunic

HTML

<script src="https://cdn.rawgit.com/dbunic/REDIPS_drag/master/redips-drag-min.js"></script>
<a href="http://www.redips.net/javascript/drag-and-drop-table-content/" target="_new">REDIPS.drag</a>
<br/>
<br/>

<!-- drag container -->
<div id="redips-drag">
    <!-- table1 -->
    <table id="table1">
        <colgroup>
            <col width="50"/>
            <col width="50"/>
            <col width="100"/>
        </colgroup>
        <tbody>
            <!-- clone 2 elements + trash -->
            <tr>
                <td class="redips-single"><div id="a" class="redips-drag redips-clone orange">A</div></td>
                <td class="redips-single"><div id="b" class="redips-drag redips-clone green">B</div></td>
                <td class="redips-trash">Trash</td>
            </tr>
        </tbody>
    </table>

    <!-- table2 - content table -->
    <table id="table2">
        <colgroup>
            <col width="50"/>
            <col width="50"/>
            <col width="50"/>
            <col width="50"/>
            <col width="50"/>
            <col width="50"/>
            <col width="50"/>
            <col width="50"/>
            <col width="50"/>
            <col width="50"/>
        </colgroup>
        <tbody>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
               ...

CSS

/* drag objects */
.redips-drag {
    cursor: move;
    margin: auto;
    background-color: white;
    text-align: center;
    font-size: 22pt; /* needed for cloned object */
    width: 38px;
    height: 35px;
    line-height: 35px;
    /* round corners */
    border-radius: 4px; /* Opera, Chrome */
    -moz-border-radius: 4px; /* FF */
}

/* tables */
div#redips-drag table {
    background-color: #ddd;
    border-collapse: collapse;
    margin: 10px;
}

/* table cells */
div#redips-drag td {
    border: 1px white solid;
    height: 50px;
    text-align: center;
    font-size: 10pt;
}

/* green objects */
.green {
    border: 2px solid #499B33;
}

/* orange objects */
.orange {
    border: 2px solid #BF6A30;
}

/* trash cell */
.redips-trash {
    color: white;
    background-color: SteelBlue;
}

body {
    font-family: arial;
}

JavaScript

// create container
var redips = {};

// initialization
redips.init = function () {
    // set reference to the REDIPS.drag library
    var rd = REDIPS.drag;
    // REDIPS.drag initialization
    rd.init();
    // define event handler after cloned element is dropped
    // tc is target cell reference (where element is dropped)
    rd.event.clonedDropped = function (tc) {
        var n1 = tc.nextElementSibling, // first cell next to dropped element
            n2,                         // second cell next to dropped element
            objNew;                     // cloned element
       // clone first element (if next cell exists)
       if (n1) {
          n2 = n1.nextElementSibling,      // try to set reference to second cell
          objNew = rd.cloneObject(rd.obj); // clone itself
          n1.appendChild(objNew);          // append to first cell
       }
       // clone second element (if second cell exists)
       if (n2) {
          objNew = rd.cloneObject(rd.obj); // clone itself
          n2.appendChild(objNew);          // append to second cell
       }
    };
}


// add onload event listener
if (window.addEventListener) {
    window.addEventListener('load', redips.init, false);
}
else if (window.attachEvent) {
    window.attachEvent('onload', redips.init);
}