REDIPS.drag & REDIPS.table

Example shows usage of drag-n-drop and table cell merge/split

by Darko Bunic

HTML

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

<!-- drag container -->
<div id="redips-drag">
    <!-- table1 -->
    <table id="table1">
        <colgroup>
            <col width="1"/> <!-- needed to have both tables nicely aligned -->
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
        </colgroup>
        <tbody>
            <!-- merge and split buttons -->
            <tr>
                <td class="redips-mark"></td>
                <td class="redips-mark"><input id="mergeBtn" type="button" value="Merge" onclick="redips.merge()"/></td>
                <td class="redips-mark"><input id="splitvBtn" type="button" value="Split V" onclick="redips.split('h')"/></td>
                <td class="redips-mark"><input id="splithBtn" type="button" value="Split H" onclick="redips.split('v')"/></td>
            </tr>
            <!-- clone 2 elements + trash -->
            <tr>
                <td class="redips-mark"></td>
                <td class="redips-single"><div id="a" class="redips-drag orange redips-clone">A</div></td>
                <td class="redips-single"><div id="b" class="redips-drag green redips-clone">B</div></td>
                <td class="redips-trash">Trash</td>
            </tr>
        </tbody>
    </table>
    
    <!-- table2 -->
    <table id="table2">
        <colgroup>
            <col width="1"/> <!-- hidden column (needed to prevent rows streching) -->
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
        </colgroup>
        <tbody>
            <tr><td...

CSS

/* drag objects */
.redips-drag {
    cursor: move;
    margin: auto;
    background-color: white;
    text-align: center;
    font-size: 25pt; /* needed for cloned object */
    width: 87px;
    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;
}

/* marked cells (first hidden column) */
.redips-mark {
    background-color: white;
    border: 0px;
}

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

body {
    font-family: arial;
}

JavaScript

// create container needed for methods below
var redips = {};

// initialization
redips.init = function () {
    // define references and local variables
    var rd = REDIPS.drag,
        rt = REDIPS.table,
        tbl = document.getElementById('table2'), // reference to table2
        i; // loop variable
    // activate onmousedown event listener on cells within table with id="mainTable"
    rt.onmousedown('table2', true);
    // define background color for marked cell
    rt.color.cell = '#9BB3DA';
    // REDIPS.drag initialization
    rd.init();
    // set hover color
    //rd.hover.colorTd = '#9BB3DA';
    // ignore first column in table2 (disable cell click on hidden table)
    for (i = 0; i < tbl.rows.length; i++) {
        rt.cell_ignore(tbl.rows[i].cells[0]);
    }
}


// method merges table cells
redips.merge = function () {
    // first merge cells horizontally and leave cells marked
    REDIPS.table.merge('h', false);
    // and then merge cells vertically and clear cells (second parameter is true by default)
    REDIPS.table.merge('v');
    // table should be initialized after merging
    REDIPS.drag.initTables();
};


// method splits table cells if colspan/rowspan is greater then 1
// mode is 'h' or 'v' (cells should be marked before)
redips.split = function (mode) {
    // split marked cells
    REDIPS.table.split(mode);
    // table should be initialized after merging
    REDIPS.drag.initTables();
};


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