原生拖拽

须要给被拖拽元素设置其行内属性 draggale = true;

1. 相对于被拖拽的元素

• 开始拖拽 ondragstart 按下鼠标并移动开始出发
• ondrag 拖拽过程出发
• ondragend 拖拽结束出发

2. 相对于放置元素

• ondragover 当被拖拽的元素通过拖拽元素时触发
• ondragleave 当被拖拽的元素通过离开拖拽元素时触发
• ondrop 当被拖拽的元素在拖拽元素上松开鼠标时触发

dataTransfer 对象 基于它 能够自定义存储或者读取数据

• dataTransfer.setData('key', 'value') 存储
• dataTransfer.getData('key') 获取

DOM事件

• DOM0级事件是给元素对象的事件属性赋值，可是一个属性只能存储一个值，屡次绑定这个属性存储的就是最后一个函数；
• DOM2: DOM2级事件的每个事件类型都有一个事件池（相似数组的一个东西），addEventListener就是向这个事件池中添加一个方法，添加完并不会当即执行，而是等到触发这个事件的时候才会真正的执行，并且是按照咱们绑定的顺序执行；

发布订阅模式 是模拟DOM2级事件的事件池思想，在某一个时刻到来时，咱们要作不少的事情（不少函数）。咱们准备一个数组当作一个事件池，而且提供向事件池中加入函数的方法以及移除的方法，当时刻来临时，咱们把事件池中的方法取出来挨个执行；

• 订阅 订阅该时刻到来，把想作的事情加入事件池
• 发布 时刻真的到来了，把事件池中的方法都执行了

发布订阅 封装

class Subscribe {
  constructor () {
    this.pond = [];
  }
  includes (fn) {
    // 判断当前事件池是否包含某一个函数
    return this.pond.includes(fn);
  }
  addListener (fn) {
    // 不能重复添加
    if (!this.includes(fn)) this.pond.push(fn);
    return this;
  }
  removeListener (fn) {
    // 取消订阅
    if (this.includes(fn)) {
      this.pond = this.pond.filter(item => item !== fn);
    }
    return this;
  }
  fire (...args) {
    // 等到时刻到来时把事件池中的的函数都执行了
    this.pond.forEach(item => item(...args));
  }
}


function fn1() {
  console.log(1)
}
function fn2() {
  console.log(2)
}
function fn3() {
  console.log(3)
}

let plan = new Subscribe();

plan.addListener(fn1).addListener(fn2).addListener(fn3);

setTimeout(() => plan.fire([1, 2, 3]), 5000);
复制代码