如何实现拖曳进容器复制一个元素，拖出容器该元素删除的功能

Question

如题，有啥好的实现思路，或者给个例子。
看了网上的例子实现了拖进去，但是拖出去不知道要如何实现让被拖动的元素拖出框就删除该元素

Answer 1

你既然用的原生的drag api，那直接在父组件里用removeChild()就好了啊
点击查看demo预览

主要代码：

 document.addEventListener(
    'drop',
    function (event) {
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if (event.target.className == 'dropzone') {
        event.target.style.background = '';
        var dupNode = dragged.cloneNode(true);
        event.target.appendChild(dupNode);
      }
        //父组件
      if (event.target.className == 'box') {
        event.target.style.background = '';
        dragged.parentNode.removeChild(dragged);
      }
    },
    false
  );

Answer 2

在拖拽事件结束后，判断目标位置是否处于盒子内，不处于就调用dom.remove()删除元素

Answer 3

数据驱动，只需要移除对应值就行了。源码肯定是没有的，一个思路谁会帮忙直接给你写一套呀？

Answer 4

根据采纳答案，使用vue实现该功能
https://codesandbox.io/s/thir...

<template>
  <div
    class="hello"
    @drop="dropHandle($event)"
    @dragover="allowDropHandle($event)"
    @dragstart="dragHandle($event)"
  >
    <span
      draggable="true"
      @dragstart="$event.dataTransfer.setData('text/plain', null)"
      >我是谁我在哪</span
    >

    <div class="box">请拖曳到此松开</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    let dragged;

    const dragHandle = (ev, type) => {
      ev.dataTransfer.effectAllowed = "copy";
      // ev.dataTransfer.dropEffect = "copy";

      ev.dataTransfer.setData("text", null);
      dragged = ev.target;
      console.log(
        "开始拖动",
        dragged
        // ev.target.parentNode,
        // ev.target.parentNode.id
      );
    };

    const dropHandle = (ev, date) => {
      ev.preventDefault();

      let data = ev.dataTransfer.getData("text");
      let dupNode = dragged.cloneNode(true);
      console.log(ev.target.className);
      if (ev.target.className == "box") {
        ev.target.appendChild(dupNode);
      }
      if (ev.target.className == "hello") {
        dragged.parentNode.removeChild(dragged);
      }

      console.log("放", ev.target, ev.target.className, data);
    };

    const allowDropHandle = (ev) => {
      // console.log('allowDrop', ev)
      ev.dataTransfer.dropEffect = "copy";

      ev.preventDefault();
    };
    return {
      dragHandle,
      dropHandle,
      allowDropHandle,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
span {
  border: 1px solid #42b983;
}
.box {
  width: 250px;
  height: 200px;
  border: 1px solid;
}
</style>