Vue.js中实现拖拽功
发布时间:
2023-09-27
预览次数:
Vue.js中实现拖拽功能需要使用HTML5的Drag and Drop API。下面是一个简单的实现拖拽功能的例子：
HTML部分：
<div id="app">
<div class="box" draggable="true" @dragstart="dragStart">Drag me</div>
<div class="box" @dragover="dragOver" @drop="drop">Drop here</div>
</div>
Vue部分：
new Vue({
el: '#app',
methods: {
dragStart(event) {
// 设置拖拽数据
event.dataTransfer.setData('text/plain', event.target.id);
},
dragOver(event) {
// 阻止默认的拖拽行为
event.preventDefault();
},
drop(event) {
// 获取拖拽数据
const id = event.dataTransfer.getData('text/plain');
// 将拖拽元素添加到目标元素中
event.target.appendChild(document.getElementById(id));
}
}
});
在上面的例子中，我们使用了draggable属性将一个元素设为可拖拽，并通过@dragstart事件监听拖拽开始的事件。在拖拽开始时，我们将拖拽数据设置为被拖拽元素的id。
然后，我们通过@dragover事件监听目标元素的拖拽进入事件，并使用event.preventDefault()阻止默认的拖拽行为。最后，我们通过@drop事件监听目标元素的拖拽放置事件，获取拖拽数据，并将被拖拽元素添加到目标元素中。
以上就是一个简单的Vue.js实现拖拽功能的示例。你可以根据自己的需求进行进一步的定制和扩展。