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

Posted 2023-02-16

【中文标题】如何使用 vue 3 组合 API 实现 html 拖放

【英文标题】：How to implement html drag and drop using vue 3 composition API

【发布时间】：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" >
  </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 等只是事件处理程序。

【参考方案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 的方式来做，但这只是一个旁注。