如何使用vue 3组合实现html拖拽API

Question

目前拖放功能正在与 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 选项完成的 vuejs 代码 API。

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

Answer 1

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

您在选项 API 中拥有的所有方法，您可以只在设置方法和 return 中使用它们：

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 附加一个 child，但也会用 Vue 的方式来附加，但这只是一个旁注。

如何使用vue 3组合实现html拖拽API

How to implement html drag and drop using vue 3 composition API

vue.js

vue-component

vuejs2

vuejs3