Drag-test

by yevt

HTML

<script src="//cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<div id="parent">
  <img id="face1" class="draggable" src="https://wybc.com/antefling2016/images/Nay_FaceClip2.png">
  <img id="face2" class="draggable"src="https://wybc.com/antefling2016/images/Riz_FaceClip2.png">
</div>

CSS

img{
	position: relative;

	width: 100%;
	height: auto;
	
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}
body{
	background-color: black;
}
#face1{
	width: 440px;
}
#face5{
	width: 450px;
}

JavaScript

var dragTarget;

//Give priority as you wish
$('#face1').data('priority', 2);
$('#face2').data('priority', 1);

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 =
    target.style.transform =
    'translate(' + x + 'px, ' + y + 'px)';

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

function setDragTarget(event) {
  var interaction = event.interaction;
  var x = event.x;
  var y = event.y;

  //choose element to grag
  dragTarget = $('#parent').find('img')
    .filter(function(i, el) {
    var clickCandicateRect = el.getBoundingClientRect();
    return insideBoundingRect(x, y, clickCandicateRect);
  }).sort(byPriority).get(0);
}

function insideBoundingRect(x, y, rect) {
  return (rect.left <= x) && (rect.top <= y) && (rect.right >= x) && (rect.bottom >= y);
}

function byPriority (a, b) {
  return $(b).data('priority') - $(a).data('priority');
}

function startDrag(event) {
  var interaction = event.interaction;
  var target = dragTarget;

  if (!interaction.interacting()) {
    interaction.start({ name: 'drag' }, event.interactable, target);
  }
}

interact('#parent').draggable({
  //use manualStart to determine which element to drag
  manualStart: true,
  onmove: dragMoveListener,
  restrict: {
    restriction: "parent",
    endOnly: true,
    elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
  },
})
  .on('down', setDragTarget)
  .on('move', startDrag);