使用自定义事件写框选和拖拽类

使用自定义事件机制,要包括

事件池:存储相应的事件

事件添加机制: 添加相应的事件处理函数

事件删除机制: 删除相应的事件处理函数

事件的触发机制: 如何触发对应的事件

添加事件池event.js

class Event {

    constructor () {

        this.events = {}; // this.events {click:[f1,f2];}

    }

    on(event,fn) {

        if (!this.events[event]) {

            this.events[event] = [];

        }

        this.events[event].push(fn);

    }

    off (event,fn) {

        if (this.events[event]) {

            this.events[event] = this.events[event].filter(fn != item);

        }

    }

    dispatch(event,...arg) {

        if(this.events[event]){

            this.events[event].forEach(item=>{

                item.call(this, ...arg);

            })

        }

    }

}

添加可以操作的drag类 拖拽类DragEl,以及框选类DragSelect drag.js.


class Drag extends Event {

    constructor(el){

        super();

        this.el = el;

        this.startMouse = {};

        let move = (e)=>{

            this.move(e);

        }

        this.el.addEventListener("mousedown",(e)=>{

            this.start(e);

            document.addEventListener("mousemove",move);

            document.addEventListener("mouseup",(e)=>{

                this.end(e);

                document.removeEventListener("mousemove",move);

            },{once:true});

        });

    }       

    start(e){

        this.startMouse = {

            x: e.clientX,

            y: e.clientY

        };

        this.dispatch("dragstart",e);

        /*

            拖拽:

                获取摁下时元素的坐标

            框选:

                创建一个元素用于画框   

        */

    }

    move(e){

        let nowMouse = {

            x: e.clientX,

            y: e.clientY

        };

        let dis = {

            x: nowMouse.x - this.startMouse.x,

            y: nowMouse.y - this.startMouse.y

        };

        this.dispatch("dragmove",{...e,type:"dragmove"},dis,nowMouse);

        /*

            拖拽:

                用摁下时元素的坐标 + 差值 计算 元素的当前值

            框选:

                Math.abs(dis.x) 计算宽度

                Math.abs(dis.y) 计算高度

                ……

        */

    }

    end(e){

        /*

            拖拽:

                不做任何事

            框选:

                删除框   

        */

        this.dispatch("dragend",{...e,type:"dragend"});

    }

}

class DragEl extends Drag {

    constructor(...arg){

        super(...arg);

        this.startOffset= {};

        this.boomEls = [];

        this.on("dragstart",(e)=>{

            this.dragStart(e);

        });

        this.on("dragmove",(e,dis,now)=>{

            this.dragMove(e,dis,now);

        });

    }

    dragStart(e){

        this.startOffset = {

            x: parseFloat(getComputedStyle(this.el)["left"]),

            y: parseFloat(getComputedStyle(this.el)["top"])

        };

    }

    dragMove(e,dis,now){

        let nowOffset = {

            x: this.startOffset.x + dis.x,

            y: this.startOffset.y + dis.y

        };

        this.el.style.left = nowOffset.x + "px";

        this.el.style.top = nowOffset.y + "px";

        /*

            和 this.boomEls 里的元素进行碰撞检测

        */

    }

}

class DragSelect extends Drag{

    constructor(...arg){

        super(...arg);

        this.select = null;

        this.on("dragstart",(e)=>{

            this.dragStart(e);

        });

        this.on("dragmove",(e,dis,now)=>{

            this.dragMove(e,dis,now);

        });

        this.on("dragend",(e,dis,now)=>{

            this.dragEnd(e);

        });

    }

    dragStart(e){

        this.select = document.createElement("div");

        this.select.className = "selectBox";

        document.body.appendChild(this.select);

    }

    dragMove(e,dis,now){

      this.select.style.width = Math.abs(dis.x) + "px"; // 框的宽度就是两个坐标点的x差值

      this.select.style.height = Math.abs(dis.y) + "px"; // 框的高度就是两个坐标点的y差值

      this.select.style.left = Math.min(now.x,this.startMouse.x) + "px"; // 两个坐标谁在左侧,谁就是left

      this.select.style.top = Math.min(now.y,this.startMouse.y) + "px";

    }

    dragEnd(e){

        this.select.remove();

    }

}

调用index.html

<script src="./event.js"></script>
<script src="./drag.js"></script>
<style>

    #box {

        top: 0;

        left: 0;

        width: 100px;

        height: 100px;

        background-color: red;

        position: relative;

    }

    .boxSel {

        position: fixed;

        border: 1px solid #06c0fd;

        background: rgba(6, 192, 255, .3);

    }

</style>

<body>

    <div id="box">1</div>

<script>

let box = document.querySelector('#box');

       let dragBox = new DragEl(box);

// 选择框

        let selectDrag = new DragSelect(document);

</script>

</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容