Drag-test

by Tim Follo

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>
<img id="face1" class="draggable" src="https://wybc.com/antefling2016/images/Nay_FaceClip2.png">
<img id="face5" class="draggable"src="https://wybc.com/antefling2016/images/Riz_FaceClip2.png">

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

/*    PART 1: FUNCTIONAL    */
/*    DEFINE BASIC DRAG CHARACTERISTICS    */

// make face1 draggable
var face1_object = interact('#face1').draggable({
    max: 5,
    manualStart: false,
    // enable inertial throwing
    inertia: false,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0.75, left: 0.75, bottom: -2, right: 0.25 }
    },

    onstart: function (event) {},
    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) {}
  });
  
// make face5 draggable
var face5_object = interact('#face5').draggable({
    max: 5,
    manualStart: false,
    // enable inertial throwing
    inertia: false,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0.75, left: 0.75, bottom: -2, right: 0.25 }
    },

    onstart: function (event) {},
    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) {}
  });

// keep track of drag
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);
}

// see if user has clicked the actual image area
function checkBoundsFace1 (event){

    var x_offset = event.pageX - $('#face1').offset().left;
    var y_offset = event.pageY - $('#face1').offset().top;

    if (x_offset < 7) { //...