Php 如何使用interact.js进行模板设计

这是我想用于模板设计的链接 我可以将模块高度从一个容器拖到第二个容器中，还可以通过使用jquery和php使用interact.js功能拖动位置。。。记录应在删除时更新ib数据库。。。有关更多详细信息，请参见下面的屏幕

需要使用jquery和PHP解决方案…interact.js是必需的：）

HTML:
180
180
240
240
360
360
360
360
下降区
交互（'.js拖动'）
.draggable（{
限制：{
限制：“家长”，
是的，
elementRect:{top:0，left:0，bottom:1，right:1}
}, 
重叠：'指针'，
惯性：没错，
checker:函数（dragEvent，//相关dragmove或dragend
事件，//触摸、指针或鼠标事件
已删除，//bool默认检查程序结果
dropzone，//dropzone可交互
dropElement，//dropzone元素
可拖动，//可拖动可交互
draggableElement）{//draggableElement
//仅允许拖放到空的dropzone元素中
返回已删除的&！dropElement.hasChildNodes（）；
}
})
.on（'dragstart'，函数（事件）{
event.interaction.x=parseInt（event.target.getAttribute（'data-x'），10）| 0；
event.interaction.y=parseInt（event.target.getAttribute（'data-y'），10）| 0；
})
.on（'dragmove'，函数（事件）{
event.interaction.x+=event.dx；
event.interaction.y+=event.dy；
if（prop）{
event.target.style[transformProp]=
'translate（'+event.interaction.x+'px'+event.interaction.y+'px'）；
}
否则{
event.target.style.left=event.interaction.x+'px'；
event.target.style.top=event.interaction.y+'px'；
}           
})
.on（'dragend'，函数（事件）{
//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'）；
});
交互（'.js-drag2'）
.draggable（{
限制：{
限制：“家长”，
是的，
elementRect:{top:0，left:0，bottom:1，right:1}
} ,
惯性：没错，
重叠：0.01，
checker:函数（dragEvent，//相关dragmove或dragend
事件，//触摸、指针或鼠标事件
已删除，//bool默认检查程序结果
dropzone，//dropzone可交互
dropElement，//dropzone元素
可拖动，//可拖动可交互
draggableElement）{//draggableElement
//仅允许拖放到空的dropzone元素中
返回已删除的&！dropElement.hasChildNodes（）；
}
})
.on（'dragstart'，函数（事件）{
event.interaction.x=parseInt（event.target.getAttribute（'data-x'），10）| 0；
event.interaction.y=parseInt（event.target.getAttribute（'data-y'），10）| 0；
})
.on（'dragmove'，函数（事件）{
event.interaction.x+=event.dx；
event.interaction.y+=event.dy；
if（prop）{
event.target.style[transformProp]=
'translate（'+event.interaction.x+'px'+event.interaction.y+'px'）；
}
否则{
event.target.style.left=event.interaction.x+'px'；
event.target.style.top=event.interaction.y+'px'；
}           
})
.on（'dragend'，函数（事件）{
event.target.setAttribute（'data-x'，event.interaction.x）；
event.target.setAttribute（'data-y'，event.interaction.y）；
});

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