Jak implementovat html drag and drop pomocí vue 3 složení API

Question 1

v současné době funkce drag and drop je práce s vue2, chci dosáhnout stejné funkce pomocí vue3 složení api.

vue2 kód:

<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>

Tady je vuejs kód provádí pomocí vuejs možnosti 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

Question 2

Jako komentáře již zmínil, je to nic, co by mohlo být odlišná v složení API, což je jen další způsob, jak definovat součásti.

Všechny metody máte v možnostech API, můžete mít v nastavení metoda a vrátit je:

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,
    }
}

Já bych asi není přímo připojit dítě s vanila js, ale také dělat to Vue způsobem, ale to je jen vedlejší poznámku.

Thomas · Answer 1 · 2021-11-23T13:20:55

Jako komentáře již zmínil, je to nic, co by mohlo být odlišná v složení API, což je jen další způsob, jak definovat součásti.

Všechny metody máte v možnostech API, můžete mít v nastavení metoda a vrátit je:

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,
    }
}

Já bych asi není přímo připojit dítě s vanila js, ale také dělat to Vue způsobem, ale to je jen vedlejší poznámku.

Jak implementovat html drag and drop pomocí vue 3 složení API

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii