Draggable

by Mark Beharrell

HTML

<div class="container">
<div class="item">&nbsp;</div>
</div>

CSS

body {padding:50px;}
.container{
  width:240px;
  height:40px;
  background-color:#fff;

position:relative;
user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.item {
  cursor:move;
  left:0;
  top:0;
  width:40px;
  height:40px;
  background-color:black;
user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
position:absolute;
}

.draggable {
  background-color:yellow;
}

JavaScript

$(document).ready(function() {
    var $dragging = null;
    $('body').on("mousedown", ".item", function(e) {
        $(this).attr('unselectable', 'on').addClass('draggable');
        $dragging = $(this);
    }).on("mouseup", ".item", function(e) {
        $dragging = null;
        $(this).removeAttr('unselectable').removeClass('draggable');
    }).on("mousemove", ".container", function(e) {
          if ($dragging) {
            var newPosition = e.pageX,// - ($(this).outerWidth() /2), 
            min = 0,
            max = $('.container').outerWidth() - $dragging.width();//el_w / 2,
            console.log(newPosition);
            if(newPosition >= min  &&  newPosition <= max ){
              	$dragging.offset({
											left: e.pageX
								});
					  }  
				}
    });
    
    /*.on("mouseleave", ".container", function(e) {
          if ($dragging) {
            $dragging = null;
        			$(this).removeAttr('unselectable').removeClass('draggable');
					 }  
				
    });*/
});