[英]How to implement html drag and drop using vue 3 composition API
currently drag and drop feature is working with vue2, i want to achieve same feature using vue3 composition api.目前拖放功能正在使用 vue2,我想使用 vue3 组合 api 来实现相同的功能。
vue2 code: 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>
Here is vuejs code done using vuejs options API.这是使用 vuejs 选项 API 完成的 vuejs 代码。
JS: 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: 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;
}
}
---------------------#---------------------------------------------------------------------------------------#------------------ ---------------------#---------------------------- -------------------------------------------------- ----------#-----------------
As the comments already mention, this is nothing that would be different in the composition API, which is just another way to define a component.正如评论已经提到的,这在组合 API 中没有什么不同,这只是定义组件的另一种方式。
All the methods you have in the options API, you can just have them in the setup method and return them:您在选项 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,
}
}
I would probably not directly append a child with vanila js but also do it the Vue way, but that's just a side note.我可能不会直接 append 一个使用 vanila js 的孩子,但也可以使用 Vue 方式,但这只是一个旁注。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.