es6类写一个拖拽功能

es5 托拽功能

 document.getElementById('box').onmousedown = function (e) {
            var startLeft = box.offsetLeft;
            var startTop = box.offsetTop;
            var startX = e.clientX;
            var startY = e.clientY;

            document.onmousemove = function (e) {
                
                var endX = e.clientX;
                var endY = e.clientY;

                var distX = startLeft + (endX - startX);
                var distY = startTop + (endY - startY);

                box.style.left = distX + 'px';
                box.style.top = distY + 'px';
                console.log('正在移动。。。。。')
            }
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }

es6 class 拖拽功能

class drag{
				constructor(id) {
				    this.div=document.querySelector(id)
					this.disX = 0;
					this.disY = 0;
					this.init();
				}
				init(){
					
					this.div.onmousedown=function(ev){
						
					this.disX = ev.clientX-this.div.offsetLeft;
					this.disY = ev.clientY-this.div.offsetTop;
					
					document.onmousemove = this.fnMove.bind(this);
					document.onmouseup = this.fnUp.bind(this);
					
					return false;
					
					}.bind(this)
				}
				fnMove(ev){
					this.div.style.left=ev.clientX-this.disX+'px';
					this.div.style.top = ev.clientY-this.disY+'px'
				}
				fnUp(){
					document.onmousemove=null;
					document.onmouseup = null;
				}
			}
			
			new drag('#div1')

extends继承

 class ckDrag extends Drag{
		    fnMove(ev){
		        super.fnMove(ev);
		
		        //限制范围
		        if(this.oDiv.offsetLeft<=0){
		            this.oDiv.style.left =0;
		        }
				
		    }
		}
 new ckDrag('#div2');