jQuery UI: Draggable

Draggable Elements

by Johan Muller

HTML

<div class="parent">
  <div class="child">
    drag
  </div>
</div>

CSS

.parent {
  display: block;
  position: relative;
  width: 400px;
  height: 100px;
  background: yellow;
}

.child {
  position: absolute;
  top: 0; left: 0;
  width: 100px;
  height: 100px;
  background: red;
  will-change: position;
}

JavaScript

!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

$( ".child" ).draggable({
	axis: "x",
  containment: "parent",
  start: function(e,ui) {
  console.log([e,ui]);
  	$('.child').removeAttr('style');
  },
  stop: function(e,ui) {
  console.log([e,ui]);
  	$('.child').attr('style','top:0;left:0;transition:left .3s 0s;');
  },
  drag:function(e,ui){
  	console.log(ui.position.left);
  }
});