REDIPS.drag example 1

Overwrite confirmation example

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">
    <!-- table2 -->
    <table id="table2">
        <colgroup>
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
        </colgroup>
        <tbody>
            <tr>
              <td>
                <div id="a" class="redips-drag" data-href="https://google.com/">
                    <img src="http://www.dictionary.com/e/wp-content/uploads/2016/01/olive-green-color-paint-code-swatch-chart-rgb-html-hex.png" class="image">
                </div>
              </td>
              <td>
                <div id="b" class="redips-drag" data-href="https://workspace.infomaniak.com/">
                    <img src="http://www.dictionary.com/e/wp-content/uploads/2016/01/570d2dfb1774154eebc8df6c228e38f1-chartreuse-bedroom-chartreuse-decor-1.jpg" class="image">
                </div>
              </td>
              <td>
                <div class="redips-drag" data-href="http://slack.com/">
                    <img src="http://www.dictionary.com/e/wp-content/uploads/2016/01/myrtle.jpg" class="image">
                </div>
              </td>
              <td>
                <div class="redips-drag" data-href="http://trello.com/">
                    <img src="http://wordpress-blog-assets-production.s3.amazonaws.com/e/wp-content/uploads/2016/01/mint.gif" class="image">
                </div>
              </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.image {
  width: 100%;
  height: 100%;
}


/* 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;
}

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.dropMode = "switch";
    // in case when DIV element is not moved then do the magic
    // read custom data attribute (data-href) and point browser to the link
   	rd.event.notMoved = function() {
			window.location.href = rd.obj.dataset.href;
		};
}


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