areas

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 class="colW" />
      <col class="colW" />
      <col width="colW" />
    </colgroup>
    <tbody>
      <!-- clone 2 elements -->
      <tr>
        <td>
          <div id="a" class="redips-drag redips-clone orange">1M6 Pig Iron</div>
        </td>
        <td>
          <div id="b" class="redips-drag redips-clone green">2M5 Factory</div>
        </td>
        <td class="redips-trash">Trash</td>
      </tr>
    </tbody>
  </table>
  <!-- table2 -->
  <table id="table2">
    <colgroup>
      <col class="colW"  />
      <col class="colW"  />
      <col class="colN road" />
      <col class="colW"  />
      <col class="colN track" />
      <col class="colW"  />
      <col class="colN road" />
      <col class="colW"  />
      <col class="colN track" />
      <col class="colW"  />
      <col class="colN track" />
      <col class="colW"  />
      <col class="colN track" />
    </colgroup>
    <tbody>
      <tr class="firstRow">
        <td>Row</td>
        <td>1 East</td>
        <td rowspan="26" class="vVertRoad">Line 1</td>
        <td>1 West</td>
        <td rowspan="26" class="vVertRail">Track 2</td>
        <td>2 East</td>
        <td rowspan="26" class="vVertRoad">Line 2</td>
        <td>2 West</td>
        <td rowspan="26" class="vVertRail">Track 3</td>
        <td>4 East</td>
        <td rowspan="26" class="vVertRoad">Line 4</td>
        <td>4 West</td>
        <td rowspan="26" class="vVertRail">Track4</td>

      </tr>



    </tbody>
  </table>


</div>

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

CSS

/* drag objects (DIV inside table cells) */

.colW { width:300px;}
.colN { width:10px;}
.redips-drag {
  cursor: move;
  margin: auto;
  background-color: white;
  text-align: center;
  font-size: 8pt;
  /* needed for cloned object */
  width: 87px;
  height: 25px;
  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: 30px;
  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;
}
.road {
  background-color: maroon;

}
.vVertRail {
    text-align:top;
    white-space:nowrap;
    transform-origin:50% 50%;
    transform: rotate(90deg);
    color:white;
    
    
}
.vVertRoad {
    text-align:top;
    white-space:nowrap;
    transform-origin:50% 50%;
    transform: rotate(90deg);
    color:white;
    
}

.

JavaScript

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

for(var i = 1; i < tableRows; i++) {
$('#table2 tr:last').after('<tr><td>' + i + '</td><td ></td><td></td><td></td><td></td><td></td><td></td></tr>');
      console.log("row" + i);
      
}

//first column
$('#table2 td:first-child').addClass('redips-mark');
//first row
$('.firstRow').find('td').each(function() {
  $(this).addClass('redips-mark');

});


// initialization
redips.init = function() {
  // reference to the REDIPS.drag library
  var rd = REDIPS.drag;
  // initialization
  rd.init();
  rd.dropMode = 'single';

  // set hover color
  rd.hover.colorTd = '#9BB3DA';

//  rd.loadContent('table2', '[["d16", 1, 2, "orange", "B2"], ["d17", 2,2, "orange", "B1"]]');
  rd.loadContent('table2','https://api.myjson.com/bins/l997p')
  //  $("#table2 tbody tr:first").addClass('redips-mark');

  // 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',...