HTML5 draggable的使用测试

兼容

    caniuse测试    

事件分为源DOM事件和目标DOM事件

        

source：

      dragstart: 当前元素开始拖拽

      drag: 当前元素拖拽中

      dragend： 当前元素结束拖拽

target:

      dragenter: 当被拖放的元素进入本元素时

      dragover： 当被拖放的元素正在本元素范围内移动时

      dragleave: 当被拖放的元素离开本元素时

      drop： 当被拖放的元素在本元素被释放时

<template>
  <div class="drag-content" draggable="true" @dragend="dragendSource"></div>
  <div
    class="put-content"
    @dragenter="dragenter"
    @drop="drop"
    @dragover="dragover"
  >
    <div class="box1 box" @click="clickMe"></div>
    <div class="box2 box"></div>
  </div>
</template>

const dragenter = (e) => {
  // e.preventDefault();
};
const drop = (e) => {
  // e.preventDefault();
  console.log(e);
};
const dragover = (e) => {
  e.preventDefault();
};
const dragendSource = (e) => {
  console.log(e);
};
const clickMe = () => {
  console.log('11111');
}
</script>

<style lang="scss">
.drag-content {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.put-content {
  width: 600px;
  height: 600px;
  border: 1px solid red;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid;
}
</style>

注意：

    将事件绑定到目标DOM上的原因是：

        1、个性化设置e.preventDefault以控制鼠标cursor的状态

        2、方便判定源DOM松手的目标DOM