interact.js drop element in underlying dropzone

i am using interact.js to create simple designer wizard that has a toolbox and a form . user should drag a tool from toolbox and drop it in form. I wrote this code :
HTML:

        <div class="SContainer">

        <div id="ToolBox" class="ToolboxContainer">
            <div class=" ToolBoxEllementContainer" >
                <div id="EllementLabel" class="draggable  EllementLabel"> Label</div>
            </div>
        </div>

        <div id="outer-dropzone" class="ToolboxContainer " style="overflow: auto;">
            <div style="height:95%; width:800px;">
                <div class="dropzone View"></div>
            </div>
        </div>

    </div>

css :

    html, body {
    height: 100%;
    margin: 0px;
}


.SContainer{
    height:80%;
    min-height:80%;
    width: 80%;
    display:flex;
}

.ToolboxContainer {
    background-color: #ccc;
    border: dashed 4px transparent;
    border-color : #519ebb;
    padding: 10px;
    height:100%;
    min-height:100%;
    flex:1;
}

.ToolBoxEllementContainer{
    border-color : #ff6a00; 
    border-style : solid dotted;
    border-width: 1px; 
}

.EllementLabel  {
    border-color : #000000 ;
    border-style : dashed ;
    border-radius: 2px;
    border-width: 2px;

}

.resize-drag {
    box-sizing: border-box;
}

.View {
    height: 400px;
    margin:20px;
    width: 200px;
    flex:1;
    position: page;
}

.dropzone {
    background-color: #519ebb;
    border: dashed 4px transparent;
    border-radius: 4px;
    border-color : #519ebb;
    padding: 0px;
    transition: background-color 0.3s;
}

.drag-drop {
    display: inline-block;
    color: #fff;
    background-color: #29e;
    border: solid 2px #fff;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    transition: background-color 0.3s;
}

javascript:

interact('.draggable').autoScroll(true)
  .draggable({
      inertia: true,
      restrict: {
          restriction: "parent",
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
      },
      snap: {

          targets: [
            interact.createSnapGrid({ x: 10, y: 10 })
          ],
          range: Infinity,
      },

      onmove: dragMoveListener,
  });

function dragMoveListener(event) {
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = ' x: ' + Math.round(x) + ' y: ' + Math.round(y);
}


interact('.dropzone').dropzone({
    accept: '#label*',
    overlap: 'pointer',
    ondragenter: function (event) {
        var draggableElement = event.relatedTarget,
            dropzoneElement = event.target;

        dad = draggableElement.parentElement;
        if (dad.parentElement.getAttribute("id") == "ToolBox") {
           //set new position for element in new div
            draggableElement.setAttribute('data-x', 0);
            draggableElement.style.transform = 'translate(' + 0 + 'px, ' + 0 + 'px)';
            dropzoneElement.appendChild(draggableElement);
        }

        draggableElement.classList.add('can-drop');
        draggableElement.classList.add('resize-drag');
    },

    ondropdeactivate: function (event) {
        event.target.classList.remove('drop-active');
        event.target.classList.remove('drop-target');
    }
});

you may also check it here : http://jsfiddle.net/nqozcepg/

my problems are :

  1. when an element drops in dropzone it moves to right after drop.
    enter image description here
  2. when I scroll the right part to right , the element will drop in dropzone div while it is still in toolbox div
    enter image description here

is there anybody can help me to solve this problem ?

is there any better idea or library rather than rather than interact.js for my purpose ?

is there any free code exist for designer wizard ?


Source: html

Leave a Reply