面向物件+jquery實現拖拽功能
阿新 • • 發佈：2019-01-10
<!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({ width: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>