<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ position: absolute; background: blue; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div class="div1"></div> <script type="text/javascript"> /* *拖拽 */ class Drag{ constructor(){ this.item=$(".div1"); this.draX=0;//x轴偏移量 this.draY=0;//y轴偏移量 this.w=200;//宽 this.h=200;//高 this.l=0;//设置div的left this.t=0;//设置div的top } init(){//初始化div this.item.css({ this.w, height:this.h }); this.offsetGet(); } offsetGet(){//得到偏移量 var _this=this; this.item.mousedown(function(ev){ var e=ev || event; _this.draX=e.clientX-_this.item[0].offsetLeft;//得到X轴偏移量 _this.draY=e.clientY-_this.item[0].offsetTop;//得到Y轴偏移量 _this.itemMove(); }) } itemMove(){//移动div var _this=this; $(document).mousemove(function(ev){ var e=ev || event; _this.l=e.clientX-_this.draX;//得到left的距离 _this.t=e.clientY-_this.draY;//得到top的距离 //判断左边距 if(_this.l<0){ _this.l=0; }else if(_this.l>$(document)[0].documentElement.clientWidth-_this.item[0].offsetWidth){ _this.l=$(document)[0].documentElement.clientWidth-_this.item[0].offsetWidth } //判断上边距 if(_this.t<0){ _this.t=0; }else if(_this.t>$(document)[0].documentElement.clientHeight-_this.item[0].offsetHeight){ _this.t=$(document)[0].documentElement.clientHeight-_this.item[0].offsetHeight } _this.item.css({ left:_this.l, top:_this.t }) }) this.overMove(); } overMove(){//结束移动 $(document).mouseup(function(){ $(document).unbind(); }) } } $(function(){ var newDrag=new Drag(); newDrag.init(); }) </script> </body> </html>
源代码：https://github.com/G-xiaojianwei/study_demo/blob/master/%E6%8B%96%E6%8B%BD.html