REDIPS.drag example 1

Overwrite confirmation example

by Berryllion

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">
            <a 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">
                  </a>
          </div>
        </td>
        <td>
          <div id="b" class="redips-drag">
            <a 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">
                  </a>
          </div>
        </td>
        <td>
          <div class="redips-drag" id="slack" style="border-style: none; cursor: move;">
            <a href="http://slack.com">
                    <img src="http://www.dictionary.com/e/wp-content/uploads/2016/01/myrtle.jpg" class="image">
                  </a>
          </div>
        </td>
        <td>
          <div class="redips-drag" id="trello" style="border-style: none; cursor: move;">
            <a href="http://trello.com">
                    <img src="http://wordpress-blog-assets-production.s3.amazonaws.com/e/wp-content/uploads/2016/01/mint.gif" class="image">
                  </a>
          </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";
  // event handler invoked before DIV element is dropped to the cell
  /*
   		rd.event.droppedBefore = function (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);
}