Shulou(Shulou.com)06/01 Report--

这篇文章主要讲解了"VUE怎么使用draggable实现组件拖拽"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"VUE怎么使用draggable实现组件拖拽"吧!

实现步骤

1、导入draggable依赖

npm i -S vuedraggable

2、引入draggable

import draggable from "vuedraggable"

3、注册draggable

components: {

draggable

},

4、使用draggable

html页面

{{ index }}

{{ item.name }}

定义属性和list

data() {

return {

list: [

{

name: "-姓名",

value: "name",

},

{

name: "-性别",

value: "sex",

},

{

name: "-年龄",

value: "age",

},

{

name: "-地址",

value: "address",

},

{

name: "-邮箱",

value: "mailbox",

},

],

editable: true, //决定是否可拖动，为false则组件不可拖动

isDragging: false,

};

},

定义移动方法

methods: {

onMove({ relatedContext, draggedContext }) {

const relatedElement = relatedContext.element;

const draggedElement = draggedContext.element;

return (

(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed

);

},

},

5、完整VUE代码

组件拖拽实例

设置组件可拖拽

{{ index }}

{{ item.name }}

{{ listString }}

import draggable from "vuedraggable";

export default {

components: {

draggable,

},

data() {

return {

list: [

{

name: "-姓名",

value: "name",

},

{

name: "-性别",

value: "sex",

},

{

name: "-年龄",

value: "age",

},

{

name: "-地址",

value: "address",

},

{

name: "-邮箱",

value: "mailbox",

},

],

list2: [],

editable: true, //决定是否可拖动，为false则组件不可拖动

isDragging: false,

delayedDragging: false,

};

},

methods: {

onMove({ relatedContext, draggedContext }) {

const relatedElement = relatedContext.element;

const draggedElement = draggedContext.element;

return (

(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed

);

},

},

computed: {

dragOptions() {

return {

animation: 0,

group: "description",

disabled: !this.editable,

ghostClass: "ghost",

};

},

listString() {

return JSON.stringify(this.list, null, 2);

},

},

watch: {

isDragging(newValue) {

if (newValue) {

this.delayedDragging = true;

return;

}

this.$nextTick(() => {

this.delayedDragging = false;

});

},

},

};

.flip-list-move {

transition: transform 0.5s;

}

.no-move {

transition: transform 0s;

}

.ghost {

opacity: 0.5;

background: #c8ebfb;

}

.list-group {

min-height: 20px;

}

.list-group-item {

cursor: move;

}

.list-group-item i {

cursor: pointer;

}

感谢各位的阅读，以上就是"VUE怎么使用draggable实现组件拖拽"的内容了，经过本文的学习后，相信大家对VUE怎么使用draggable实现组件拖拽这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.