H5拖动如何在vue脚手架中实现

实现的效果是

1. 将右侧容器里的小方块移动到 左侧的容器中 也可以移回到右侧容器中
2. 在方块进入容器时 容器背景颜色会变化 拖动元素移出或者放入容器中 背景变回透明

需要用到的事件以及方法

draggable 可拖动 对需要拖动的对象设置为true
ondrag 元素拖动时触发
ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 只拖动的元素在里面移动会一直触发
ondragenter 当被鼠标拖动的对象 进入 其容器范围内时触发此事件 只会在拖动元素进入时触发一次
ondragleave 当被鼠标拖动的对象 离开 其容器范围内时触发此事件 此事件作用在目标元素上
ondrop 在一个拖动过程中，释放鼠标键时触发此事件 此事件作用在目标元素上
e.dataTransfer.setData() 方法设置被拖数据的数据类型和值 就是储存
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点 就是在目标元素末尾将移动的元素添加过去
getAttribute() 方法通过名称获取属性的值
e.target.getAttribute(‘id’) 获得移动元素的id值
阻止事件冒泡
e.stopPropagation();
取消默认行为
e.preventDefault();
详细的可以去菜鸟教程 菜鸟教程连接

• html内容

<div class="homeOutside">
    <div
      class="container"
      @dragover="dragover"
      @dragenter="dragenter"
      @dragleave="dragleave"
      @drop="drop"
    >
      <div
      v-for="(item,i) in list"
      :key="item"
        class="demo"
        :id="i"
        @drag="drag"
        draggable
        @dragstart="dragstart"
        @dragleave="nothing"
        @dragenter="nothing"
      >
        {{item}}
      </div>
    </div>
    <div
      class="container"
      @dragover="dragover"
      @dragenter="dragenter"
      @dragleave="dragleave"
      @drop="drop"
    ></div>
  </div>

• JS内容

data() {
   return {
     list:['a','b','c']
   }
 },

 methods: {
   // e是当前的事件的对象 target当前的dom对象

   // 拖动元素开始拖动时
   dragstart(e) {
     // 获取id值 将id储存起来
     e.dataTransfer.setData("id", e.target.getAttribute("id"));
   },
   drag() {
     console.log("被拖动了");
   },
   drop(e) {
     
     let old = document.getElementById(e.dataTransfer.getData("id"));
     console.log(old.innerHTML)
     // 将拖动元素添加的目标元素中去
     e.target.appendChild(old);
     // 拖动元素移动到目标元素，加上背景为透明
     e.target.style.background = "transparent";
   },
   //在目标元素内移动阻止默认行为，将拖动时的图标删除
   dragover(e) {
     e.preventDefault();
   },
    //拖动元素进入目标元素中，加上背景颜色
   dragenter(e) {
     e.target.style.background = "gainsboro";
   },
   //拖动元素离开目标元素，加上背景为透明
   dragleave(e) {
     e.target.style.background = "transparent";
   },

   // 因为拖动元素是外面容器的子代，会继承之前的背景色 所有让他独立拥有
   nothing(e) {
     // 阻止事件冒泡
     e.stopPropagation();
     //取消默认行为
     e.preventDefault();
   }
 }