interactjs dragging

interactjs dragging

by Dinh Nguyen

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<div class="draggable">
  <img src="http://recruit.framgia.vn/wp-content/uploads/2016/06/framgia-logo-black-1.png">
  <p class="center">
    Draggable
  </p>
</div>

CSS

.draggable {
  width: 25%;
  height: 100%;
  min-height: 6.5em;
  margin: 10%;
  background-color: #29e;
  color: white;
  border-radius: 0.75em;
  padding: 4%;
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.center {
  text-align: center
}

JavaScript

interact('.draggable')
  .draggable({
    // enable inertial 
    inertia: true,
    
    // call  function on drap
    onmove: dragMoveListener,
    // call function on end drap
    onend: function(event) {
      var textEl = event.target.querySelector('p');
      textEl && (textEl.textContent =
        'Moved ' + (Math.sqrt(event.dx * event.dx +
          event.dy * event.dy) | 0) + 'px');
    }
  });

function dragMoveListener(event) {
  var target = event.target,
    // keep the dragged position in the data-x/data-y attributes
    x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
    y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

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

  	// update the posiion attributes
 	 	target.setAttribute('data-x', x);
  	target.setAttribute('data-y', y);
}