使用自定义事件机制，要包括
事件池：存储相应的事件
事件添加机制: 添加相应的事件处理函数
事件删除机制: 删除相应的事件处理函数
事件的触发机制: 如何触发对应的事件
添加事件池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>
