Question

这是我想用于模板设计的链接http://interactjs.io/ 我可以将模块高度从一个容器拖到第二个容器中，并可以通过使用interactive.js功能来拖动位置，使用jquery和php ...记录应该是更新ib数据库下降...请参阅下面的屏幕了解更多详细信息

see screenshot for more help

需要使用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);            
        });

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

1 个答案: