如何使用 vue 3 组合 API 实现 html 拖放答案

【问题标题】：How to implement html drag and drop using vue 3 composition API如何使用 vue 3 组合 API 实现 html 拖放
【发布时间】：2022-01-01 18:16:19
【问题描述】：

目前拖放功能正在使用 vue2，我想使用 vue3 组合 api 实现相同的功能。

vue2 代码：

<div id="app">
  <div id="box-droppable1" @drop="drop" @dragover="allowDrop">
    <h3>Draggaable area 1:</h3>
    <hr>
    
    <div class="" draggable="true" @dragstart="onDragging" id="123">
      <h2>Drag mee</h2>
      <p>this is a text</p>
    </div>
     
    <img id="img-draggable" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" draggable="true" @dragstart="drag" width="336">
  </div>
  
  <div id="box-droppable2" @drop="drop" @dragover="allowDrop">
    <h3>Droppable area 2:</h3>
    <hr>
  </div>
</div>

这是使用 vuejs 选项 API 完成的 vuejs 代码。

JS：

new Vue({
  el: '#app',
  data(){
    return {
    };
  },
  methods : {
    onDragging(ev){
      console.log(ev);
      ev.dataTransfer.setData("text", ev.target.id);
      //this.$store.commit('module/namespace', status);
    },
    allowDrop(ev) {
      ev.preventDefault();
    },
    drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    },
    drop(ev) {
      ev.preventDefault();
      let data = ev.dataTransfer.getData("text");
      console.log(data);
      ev.target.appendChild(document.getElementById(data));
    }
  },
})

css：

#app{
  width: 100%;
  display: flex;
  
  #box-droppable1 {
    width: 50%;
    background-color: coral;
    min-height: 300px;
    height: 70px;
    
    padding: 10px;
    border: 1px  solid #aaaaaa;
  }
  
  #box-droppable2 {
    width: 50%;
    min-height: 300px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
  }
}

----------#-------------- -------------------------------------------------- ------------#------------------

codepen

【问题讨论】：

为什么组合 API 不支持此功能？
我查看了很多教程，但找不到使用 COMP api 的人。
“这个功能” - 什么功能？您所做的一切都不是特定于选项/组合 API。 onDragging 等只是事件处理程序。

标签： vue.js vuejs2 vue-component vuejs3

【解决方案1】：

正如 cmets 已经提到的，这在组合 API 中没有什么不同，这只是定义组件的另一种方式。

您在选项 API 中拥有的所有方法，您可以在 setup 方法中拥有它们并返回它们：

setup() {
    const onDragging = (ev) => {
        console.log(ev);
        ev.dataTransfer.setData("text", ev.target.id);
    };
    const allowDrop = (ev) => {
        ev.preventDefault();
    };
    const drag = (ev) => {
        ev.dataTransfer.setData("text", ev.target.id);
    };
    const drop = (ev) => {
        ev.preventDefault();
        let data = ev.dataTransfer.getData("text");
        console.log(data);
        ev.target.appendChild(document.getElementById(data));
    }
    return {
        onDragging,
        allowDrop,
        drag,
        drop,
    }
}

我可能不会直接用 vanila js 附加一个孩子，而是用 Vue 的方式来做，但这只是一个旁注。

【讨论】：