Wie kann ich interact.js für Template-Design verwenden

Question

Hier ist der Link, den ich für Template-Design verwenden möchte http://interactjs.io/ Ich kann die Modulhöhe von einem Container in den zweiten Container ziehen und Position ziehen, indem Sie interact.js Funktionalität verwenden mit jquery und PHP ... Datensatz sollte Update ib Datenbank auf Tropfen sein ... siehe Bild unten für weitere Details

see screenshot for more help

Notwendigkeit Lösung mit jQuery und PHP ... interact.js ist Pflicht :)

Answer 1

HTML: 
<div class="containerdiv" style="float:left"> 
<div id="drag-450-180" class="draggable js-drag">180</div> 
<div id="drag-900-180" class="draggable js-drag">180</div> 
<div id="drag-450-240" class="draggable js-drag">240 </div> 
<div id="drag-900-240" class="draggable js-drag">240 </div> 
<div id="drag-450-360" class="draggable js-drag">360 </div> 
<div id="drag-900-360" class="draggable js-drag">360 </div> 
<div id="drag-450-480" class="draggable js-drag">360 </div> 
<div id="drag-900-480" class="draggable js-drag">360 </div> 
</div> 
<div class="dropzone-wrapper"> 
    <div id="drop1" class="dropzone js-drop">Dropzone</div> 
</div> 
interact('.js-drag') 
     .draggable({ 
     restrict: { 
       restriction: "parent", 
       endOnly: true, 
       elementRect: { top: 0, left: 0, bottom: 1, right: 1 } 
      }, 
     overlap: 'pointer', 
     inertia: true, 
     checker: function (dragEvent,   // related dragmove or dragend 
      event,    // Touch, Pointer or Mouse Event 
      dropped,   // bool default checker result 
      dropzone,   // dropzone Interactable 
      dropElement,  // dropzone elemnt 
      draggable,   // draggable Interactable 
      draggableElement) {// draggable element 

      // only allow drops into empty dropzone elements 
      return dropped && !dropElement.hasChildNodes(); 
      } 
     }) 
     .on('dragstart', function (event) { 
      event.interaction.x = parseInt(event.target.getAttribute('data-x'), 10) || 0; 
      event.interaction.y = parseInt(event.target.getAttribute('data-y'), 10) || 0; 

     }) 
     .on('dragmove', function (event) { 
      event.interaction.x += event.dx; 
      event.interaction.y += event.dy; 
      if (transformProp) { 
       event.target.style[transformProp] = 
        'translate(' + event.interaction.x + 'px, ' + event.interaction.y + 'px)'; 
      } 
      else { 
       event.target.style.left = event.interaction.x + 'px'; 
       event.target.style.top = event.interaction.y + 'px'; 
      }   
     }) 
     .on('dragend', function (event) { 
      // event.target.setAttribute('data-x', event.interaction.x); 
      // event.target.setAttribute('data-y', event.interaction.y); 
      event.target.setAttribute('data-x', 0); 
      event.target.setAttribute('data-y', 0); 
      event.target.removeAttribute('style'); 
     }); 
     interact('.js-drag2') 
     .draggable({ 
      restrict: { 
       restriction: "parent", 
       endOnly: true, 
       elementRect: { top: 0, left: 0, bottom: 1, right: 1 } 
      } , 
      inertia: true, 
      overlap: 0.01, 
      checker: function (dragEvent,   // related dragmove or dragend 
      event,    // Touch, Pointer or Mouse Event 
      dropped,   // bool default checker result 
      dropzone,   // dropzone Interactable 
      dropElement,  // dropzone elemnt 
      draggable,   // draggable Interactable 
      draggableElement) {// draggable element 

      // only allow drops into empty dropzone elements 
      return dropped && !dropElement.hasChildNodes(); 
      } 
     }) 
     .on('dragstart', function (event) { 
      event.interaction.x = parseInt(event.target.getAttribute('data-x'), 10) || 0; 
      event.interaction.y = parseInt(event.target.getAttribute('data-y'), 10) || 0;   
     }) 
     .on('dragmove', function (event) { 
      event.interaction.x += event.dx; 
      event.interaction.y += event.dy; 
      if (transformProp) { 
       event.target.style[transformProp] = 
        'translate(' + event.interaction.x + 'px, ' + event.interaction.y + 'px)'; 
      } 
      else { 
       event.target.style.left = event.interaction.x + 'px'; 
       event.target.style.top = event.interaction.y + 'px'; 
      }   

     }) 
     .on('dragend', function (event) { 
      event.target.setAttribute('data-x', event.interaction.x); 
      event.target.setAttribute('data-y', event.interaction.y);    
     });