Boostrap + Interact JS Test

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://code.interactjs.io/interact-1.2.3.min.js"></script>
<div id="visualizer-panel">
    <div class="leftStuff panel">
        <div id="drag-base" class="draggable">
        </div>
    </div>
    <div class="rightStuff panel">
        <div id="dropzone" class="dropzone"></div>
    </div>
</div>

CSS

#visualizer-panel .leftStuff {
    float: left;
    width. 200px;
}
#visualizer-panel .rightStuff {
    float: right;
    width: 400px;
}

#drag-base {
		  background: #d9534f;
		  color: #000000;
		  width: 35px;
		  height: 35px;
		  border-radius: 50%;
		  text-align: center;
		  -webkit-transform: translate(0px, 0px);
		          transform: translate(0px, 0px);
		}
    
    .dropzone {
		  background-color: #e9ebed;
		  padding: 10px;
		  width: 100%;
		  height: 600px;
		  overflow-y: scroll;
		  border: dashed 4px transparent;
		  float:left;
		}

		.drop-active {
		  border-color: #aaa;
		}

		.drop-target {
		  background-color: #3f5265;
		  color: #FFF;
		  border-color: #fff;
		  border-style: solid;
		}
#visualizer-panel .drop-active { border-color: red; }
#visualizer-panel .drag-drop.can-drop { background-color: #4e4; }
#visualizer-panel .drop-target {  background-color: #29e;  }

JavaScript

interact('.draggable').draggable({
    inertia: true,
    restrict: {
      restriction: ".dropzone",
      drag: document.getElementById('dropzone'),
      endOnly: true,
      elementRect: {
        top: 0,
        left: 0,
        bottom: 1,
        right: 1
      }
    },
    autoScroll: true,
    onmove: function(event) {
      var target = event.target;
      var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
      var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

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

      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    },
    onend: function(event) {
      console.log(event);
    }
  })
  .on('move', function(event) {
    var interaction = event.interaction;
    if (interaction.pointerIsDown && !interaction.interacting() && event.currentTarget.getAttribute('clonable') != 'false') {
      var original = event.currentTarget;
      var clone = event.currentTarget.cloneNode(true);
      var x = clone.offsetLeft;
      var y = clone.offsetTop;
      clone.setAttribute('clonable', 'false');
      clone.style.position = "absolute";
      clone.style.left = original.offsetLeft + "px";
      clone.style.top = original.offsetTop + "px";
      original.parentElement.appendChild(clone);
      interaction.start({
        name: 'drag'
      }, event.interactable, clone);
    }
  })
  .resizable({
    edges: {
      left: true,
      right: true,
      bottom: true,
      top: true
    }
  })
  .on('resizemove', function(event) {
    var target = event.target;
    x = (parseFloat(target.getAttribute('data-x')) || 0),
      y = (parseFloat(target.getAttribute('data-y')) || 0);

    // update the element's style
    target.style.width = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

   ...