Как я могу использовать взаимодействовать.js для дизайна шаблона
вот ссылка, которую я хочу использовать для дизайна шаблона http://interactjs.io/
я могу перетащить высоту модуля из одного контейнера во второй контейнер и перетащить позицию, используя функциональность interactive.js, используя jquery и php … запись должна обновлять базу данных ib по капле … подробнее смотрите на экране ниже
смотрите скриншот для получения дополнительной помощи
нужно решение с помощью jquery и PHP … взаимодействовать.js обязательно 🙂
Решение
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);
});
Другие решения
Других решений пока нет …