目前拖放功能正在使用 vue2，我想使用 vue3 組合 api 實作相同的功能。
Vue2 代碼：
<div id="app">
<div id="box-droppable1" @drop="drop" @dragover="allowDrop">
<h3>Draggaable area 1:</h3>
<hr>
<div 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;
}
}
---------------------#---------------------------- -------------------------------------------------- ----------#------------------
代碼筆
uj5u.com熱心網友回復：
正如評論已經提到的，這在組合 API 中沒有什么不同，這只是定義組件的另一種方式。
您在選項 API 中擁有的所有方法，您可以將它們包含在設定方法中并回傳它們：
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 的方式來做，但這只是一個旁注。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/364341.html
標籤：Vue.js Vuejs2 Vue 组件 Vuejs3
上一篇：如何在Vue中正確觀察物件？