REDIPS.drag example 1

Overwrite confirmation example

by jimkennelly

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="100"/>
            <col width="100"/>
            <col width="100"/>
        </colgroup>
        <tbody>
            <!-- clone 2 elements -->
            <tr>
                <td><div id="a" class="redips-drag redips-clone orange">A</div></td>
                <td><div id="b" class="redips-drag redips-clone green">B</div></td>
                <td class="redips-trash">Trash</td>
            </tr>
        </tbody>
    </table>
    <!-- table2 -->
    <table id="table2">
        <colgroup>
            <col width="100"/>
            <col width="100"/>
            <col width="10" class="track"/>
            <col width="100"/>
           <col width="100"/>
           <col width="100"/>
        </colgroup>
        <tbody>
        <tr><td>1 East</td><td>1 West</td><td rowspan="3">T<br>r<br>a<br>c<br>k<br>2</td><td></td><td></td><td></td></tr>
            <tr><td>1</td><td></td><td></td><td></td><td></td><td></td></tr>

        </tbody>
    </table>
       
       
</div>

<br/>
- when DIV element is overwritten then confirmation dialog will show up

CSS

/* drag objects (DIV inside table cells) */
.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: #eee;
    border-collapse: collapse;
    margin: 10px;
}

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

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

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

/* message line */
#message {
    color: white;
    background-color: #aaa;
    text-align: center;
    margin-top: 10px;
}

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

body {
    font-family: arial;
}
.track {
  background-color:red;
}

JavaScript

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

// initialization
redips.init = function () {
    // reference to the REDIPS.drag library
    var rd = REDIPS.drag;
    // initialization
    rd.init();
    // set hover color
    rd.hover.colorTd = '#9BB3DA';
    
    rd.loadContent('table2', '[["d16", 1, 2, "orange", "B2"], ["d17", 2,2, "orange", "B1"]]');
    
    
    // event handler invoked before DIV element is dropped to the cell
    rd.event.droppedBefore = function (targetCell) {
    


    var a = rd.getPosition(targetCell);
    
    
    
        // test if target cell is occupied and set reference to the dragged DIV element
        var empty = rd.emptyCell(targetCell, 'test'),
            obj = rd.obj;
        // if target cell is not empty
        if (!empty) {
            // confirm question should be wrapped in setTimeout because of
            // removeChild and return false below
            setTimeout(function () {
                // ask user if he wants to overwrite TD (cell is already occupied)
                if (confirm('Overwrite content?')) {
                    rd.emptyCell(targetCell);
                }
                // append previously removed DIV to the target cell
                targetCell.appendChild(obj);
            }, 50);
            // remove dragged DIV from from DOM (node still exists in memory)
            obj.parentNode.removeChild(obj);
            // return false (deleted DIV will not be returned to source cell)
            return false;
        }
    };
}


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