<div class="unselectable">Drag me!</div>
body {background: #3c3c3c;} div { background: #FFF; width: 100px; height: 100px; text-align: center; line-height: 100px; vertical-algin: middle; border: 1px solid black; cursor: pointer; } *.unselectable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
$(document).ready(function() { var $dragging = null; $(document.body).on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY-50, left: e.pageX-50 }); } }); $(document.body).on("mousedown", "div", function (e) { $dragging = $(e.target); }); $(document.body).on("mouseup", function (e) { $dragging = null; }); });