盒子页面拖拽

 

 

构造器盒子拖拽

<script>
        // class Person{
        //     constructor(){

        //     }
        // }
        class DragBox {
            constructor(color = 'red') {
                this.el = null;
                this.color = color;
            }
            // 初始化一个盒子
            init() {
                // 在页面创建一个子节点
                this.el = document.createElement('div')
                // 获取子节点
                document.body.appendChild(this.el)
                this.el.style.cssText = `
                height:100px;width:100px;background-color:${this.color};
                position:absolute;left:0px;top:0px;
                `;
               
                
                // 链式编程
                return this;
            }
            // 开始拖拽
            dragStart() {
                this.el.onmousedown = (e) => {
                    let { offsetX, offsetY } = e;
                    this.dragIng(offsetX, offsetY);
                    this.dragEnd();
                }
            }
            // 拖拽中
            dragIng(x, y) {
                let sefl = this;
                document.onmousemove = function (e) {
                    sefl.el.style.left = e.pageX - x + "px";
                    sefl.el.style.top = e.pageY - y + 'px';
                }
            }
            // 拖拽结束
            dragEnd() {
                document.onmouseup = function () {
                    document.onmouseup = document.onmousemove = null;
                }
            }
        }
            // 实例化
            new DragBox().init().dragStart();
            new DragBox('pink').init().dragStart();
            new DragBox('yellow').init().dragStart();



    </script>

 

面向对象

<script>
        function DragBox() {
            this.el = null;  //盒子
            this.init = function (color = 'green',obj) {
                this.el = document.createElement('div')
                this.el.style.width = '150px';
                this.el.style.height = '150px';
                this.el.style.backgroundColor = color;
                this.el.style.position = 'absolute'
                this.el.style.left=obj.left+"px"
                this.el.style.top=obj.top+"px"
                document.body.appendChild(this.el);
                return this;  //链式编程的核心
            }
            // 按下
            this.dragStar = function () {
                let self = this;
                this.el.onmousedown = function (e) {
                    let { offsetX, offsetY } = e
                    // 按下
                    self.dragMove(offsetX, offsetY)
                    self.dragEnd()
                }
            }
            // 移动
            this.dragMove = function (x, y) {
                document.onmousemove = (e) => {
                    let { pageX, pageY } = e;
                    this.el.style.left = pageX - x + "px"
                    this.el.style.top = pageY - y + "px"
                }
            }
            // 松开
            this.dragEnd = function () {
                // 在文档任意位置松开
                document.onmouseup = function () {
                    document.onmouseup = document.onmousemove = null;
                }
            }
        }

        // new DragBox().init('yellow').dragStar();
        // new DragBox().init('pink').dragStar();
        new DragBox().init('red',{left:200,top:300}).dragStar();
        new DragBox().init('pink',{left:100,top:30}).dragStar();
         




    </script>

 

工厂模式 盒子拖拽

<script>
        function createFactor(){
            var p ={};
            p.init=function(){
                this.el=document.createElement('div')
                document.body.appendChild(this.el)
                this.el.style.position='absolute';
                this.el.style.backgroundColor='red';
                this.el.style.height="100px"
                this.el.style.width='100px';
                return this;
            }
            p.dragStart=function(){
                let self=this;
                this.el.onmousedown=function(e){
                    let disX=e.pageX-this.offsetLeft;
                    let disY=e.pageY-this.offsetTop;
                    self.dragIng(disX,disY);
                    self.dragEnd();
                }
                return this;
            }
            p.dragIng=function(x,y){
                let self=this;
                document.onmousemove=function(e){
                    let{pageX,pageY}=e;
                    self.el.style.left=pageX-x+"px"
                    self.el.style.top=pageY-y+"px"

                }
            }
            p.dragEnd=function(){
                document.onmouseup=function(){
                    document.onmouseup=document.onmousemove=null
                }
            }
            return p.init().dragStart();
        }
        createFactor()
        createFactor()

        
    </script>

 

盒子区间拖拽

// 拖拽实现
// 属性  包含拖拽盒子的大盒子  拖拽的盒子  盒子的坐标位置
class Touch {
    constructor(outerBox, move) {
        this.outerBox = outerBox //包含的盒子
        this.move = move //移动的盒子
        this.point = { //坐标位置
            x: parseInt(this.getStyle(move).left) || 0,
            y: parseInt(this.getStyle(move).top) || 0
        } //基础坐标为0,0
        this.handlerDown()
    }
    //获取样式的方法
    getStyle(element) {
        return window.getComputedStyle ? window.getComputedStyle(element, '') : element.currentStyle
    }
    //按下
    handlerDown(){
        this.move.onmousedown = (e)=>{
            e = e || window.event
            //获取第一次按下的位置
            let currentX = e.offsetX
            let currentY = e.offsetY
            //调用移动的方法
            this.handlerMove(currentX,currentY)
            //调用弹起的方法
            this.handlerUp()
        }
    }
    //弹起
    handlerUp(){
        document.onmouseup = ()=>{
            this.outerBox.onmousemove = null
        }
    }
    //移动
   handlerMove(currentX,currentY){
         //给大盒子添加移动事件
         this.outerBox.onmousemove = (e) => {
            e = e || window.event
            //大盒子在页面上的位置
            let { x, y } = this.getPagePoint(this.outerBox)
            //获取移动的位置 - 大盒子在页面上的位置 - 当前按下位置
            let { targetX, targetY } = {
                targetX: e.pageX - x - currentX,
                targetY: e.pageY - y - currentY
            }
            let { maxX, maxY } = {
                maxX: this.outerBox.offsetWidth - this.move.offsetWidth,
                maxY: this.outerBox.offsetHeight - this.move.offsetHeight
            }
            //区间判断
            if (targetX < 0) {
                targetX = 0
            }
            if (targetX > maxX) {
                targetX = maxX
            }
            if (targetY < 0) {
                targetY = 0
            }
            if (targetY > maxY) {
                targetY = maxY
            }
            //将对应的位置设置进去
            this.point = { x: targetX, y: targetY }
            this.setMovePoint()
        }
   }
    setMovePoint() {
        //设置
        this.move.style.left = this.point.x + 'px'
        this.move.style.top = this.point.y + 'px'
    }
    getPagePoint(element) {
        let x = 0
        let y = 0
        while (element.offsetParent) {
            x += element.offsetLeft
            y += element.offsetTop
            element = element.offsetParent
        }
        return { x, y }
    }
}