本文主要详细介绍vue拖拽组件vuedraggable的使用说明。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

vue拖动组件vuedraggable的操作说明供您参考。具体情况如下

要理解H5的draggable属性，请参考下面的代码注释。

！文档类型html

html lang=en

头

meta charset=UTF-8

meta name= viewport content= width=device-width，initial-scale=1.0

meta http-equiv= X-UA-Compatible content= ie=edge

标题文档/标题

风格。方框{

宽度：500px

高度：150px

边框：1px纯黑；

边距-顶部：40px

}

/风格

脚本

函数dragstart(事件){

/*

*拖动元素时，会触发dragstart事件，被拖动的对象会通过event对象事件中的dataTransfer来传输数据。

*通过event . data transfer . setdata( drag content ，event.target.id)

*将拖动的对象id存储在dataTransfer中。

* */

event . data transfer . setdata( drag content ，event . target . id)；

}

功能下降(事件){

event . prevent default()；

/*

*当元素被放置在目标元素上时，释放鼠标触发drop事件，

*取出刚才通过event . data transfer . get data( drag content )保存的id

*然后通过node.appendChild()将拖动的对象放入目标容器。

* */

let data=event . data transfer . get data( drag content )；

event . target . appendchild(document . getelementbyid(data))

}

函数拖动(事件){

event . prevent default()；

/*

*特别声明：如果此事件未绑定，则不会触发drop事件。

*

*虽然已经设置了可以拖动元素，但是默认情况下，浏览器不能将数据/元素放置到其他元素中。

*如果有必要设置一些元素来接受被拖动的元素，就有必要阻止其默认行为，

*这是通过设置接收元素的ondragover事件来调用event.preventDefault()方法。

*/

}

/脚本

/头

身体

！-向元素添加draggable=true属性，以便可以拖动它-

div id= dragid draggable= true ondragstart= dragstart(event)我是可以拖动的文本/div

div id= dragboxId class= box on drop= drop(event) on dragover= dragover(event)/div

/body

/html

vuedraggabe使用说明

首先，通过yarn add vuedraggable或NPM I-S vuedragable安装组件。

在vue的组件中引入组件和配置声明。

从“vuedraggable”导入可拖动的

.

导出默认值{

组件：{

可拖动，

},

.

通过直接使用可拖动组件作为被动元素的容器，可以实现内部元素的拖放。

draggable:list= myArray group= people @ start= drag=true @ end= drag=false

div v-for= myArray中的元素:key= element . id { element . name } }/div

/draggablevue

在多个可拖动容器之间拖放，只需要将可拖动组件的道具组配置为同一个组。

属性列表是拖动元素的列表。

当您单击拖动元素时，拖动元素将自动添加，其类名为。sortable-choosed，样式(如背景色)可以通过该类设置。

将拖放元素拖动到另一个位置时，拖放元素将自动添加一个类名。sortable-ghost，样式(比如背景色)可以通过这个类设置。

页眉/页脚槽也可以添加到可拖动组件中。这时，draggable=。需要将“item”添加到可拖动组件中。通过设置可拖动元素的类，它显示了组件中的哪些元素可以被拖动。

可拖动v-model=myArray draggable=。项目

div v-for= myArray中的元素:key=element.id class=item

{{element.name}}

/div

button slot= footer @ click= addPeople add/button

/可拖动

结尾：

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。