我如何使用interact.js 進行模板設計

Question

這是我想用於模板設計的鏈接http://interactjs.io/我可以將模塊高度從一個容器拖動到第二個容器中，並且可以通過使用 jquery 和 php 使用interact.js 功能拖動位置...記錄應該是在 drop 時更新 ib 數據庫...有關更多詳細信息，請參閱下面的屏幕

查看屏幕截圖以獲得更多幫助

需要使用 jquery 和 PHP 的解決方案...interact.js 是強制性的 :)

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);            
        });