原生拖拽

須要給被拖拽元素設置其行內屬性 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);
複製代碼