REDIPS.drag example 5

CSS transitions (zoom on hover)

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="100" />
      <col width="100" />
    </colgroup>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

<br/> CSS transitions (zoom on hover)

CSS

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

.redips-drag {
  cursor: move;
  margin: auto;
  /* transition - for hover */
  transition: width 0.2s, height 0.2s;
  background-color: white;
  font-size: 18pt;
  /* needed for cloned object */
  width: 80px;
  height: 25px;
  /* round corners */
  border-radius: 8px;
  /* Opera, Chrome */
  -moz-border-radius: 8px;
  /* FF */
  /* needed for vertical text alignment in DIV element */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* style applied on hover */

.redips-drag:hover {
  width: 85px;
  height: 31px;
}

/* tables */

div#redips-drag table {
  background-color: #eee;
  border-collapse: collapse;
  margin: 10px;
}

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

/* 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() {
  // init REDIPS.drag library
  REDIPS.drag.init();
  var rd = REDIPS.drag;
  
  rd.event.dropped = function(targetCell){
  console.log("dropped");
  console.log(targetCell);
  console.log('---------------');
  
  
  };
   rd.event.deleted = function(targetCell){
  console.log("deleted");
  console.log(targetCell);
  var x = rd.obj.id;
  console.log(x);
  
  
  };
   rd.event.droppedBefore= function(targetCell){
  console.log("dropped before");
  console.log(targetCell);
  
  };
  
};

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