$(function(){ var isDraging = false;? ? var startX = 0;? ? var startY = 0; $('div').on('mousedown',function(e){ isDraging = true;? ? ? ? startX = e.pageX - this.offsetLeft;? ? ? ? startY = e.pageY - this.offsetTop; }); $('div').on('mouseup',function(e){ isDraging = false; }); $('div').on('mousemove',function(e){? ? ? ? var moveX = e.pageX - startX;? ? ? ? var moveY = e.pageY - startY;? ? ? ? var pageX = document.documentElement.clientWidth - $('div').offsetWidth;? ? ? ? var pageY = document.documentElement.clientHeight - $('div').offsetHeight;? ? ? ? moveX = Math.min(pageX, Math.max(0, moveX));? ? ? ? moveY = Math.min(pageY, Math.max(0, moveY));? ? ? ? if (isDraging) {? ? ? ? ? ? $('div').css({? ? ? ? ? ? 'left':moveX+'px'? ? ? ? ? ? 'top':moveY+'px'? ? ? ? ? ? ? ? 'position' : 'absolute'? ? ? ? ? ? });? ? ? ? } });});