how can i use interact.js for template design - php

Question

here is the link which i want to use for template design http://interactjs.io/
i can drag the module height from one container into second container and can drag position by using interact.js functionality by using jquery and php... record should be update ib database on drop... see screen below for more detail
see screenshot for more help
need solution with jquery and PHP...interact.js is compulsory :)

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