本文主要详细介绍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
/可拖动
结尾：以上是draggable的简单指令，可以满足基本的拖动要求。如有错误，请不吝指正。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。