事件监听——拖拽事件drag

在项目中遇到需要拖拽元素的需求，一开始考虑的是鼠标的mousedown、mouseup、mousemove等事件组合，之后研究发现元素本身存在drag事件，可以直接调用监听：

/**
* 添加监听事件，实现拖拽功能
*/
    handleAddDomListen() {
       //具体拖拽元素
      const Refs = this.$refs.layoutsToolbarRef
      // 开始拖拽
      document.addEventListener('dragstart', function (event) {
        //dataTransfer.setData()方法设置数据类型和拖动的数据
        event.dataTransfer.setData('Text', event.target.id)
        //修改拖动元素的透明度
        event.target.style.opacity = '1'
      })
      /* 拖动完成后触发 */
      document.addEventListener('dragend', function (event) {
       
        event.target.style.opacity = '1'
        const max = document.body.clientHeight - Refs.offsetHeight
        let moveTo = event.clientY > max ? max : event.clientY < 0 ? 0 : event.clientY
        Refs.style.top = moveTo + 'px'
      })
    }

　　参考文档：https://www.runoob.com/try/try.php?filename=tryjsref_ondrag_all