vuedraggable拖拽,vue实现组件拖拽
本文主要详细介绍vue拖拽组件vuedraggable的使用说明。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
vue拖动组件vuedraggable的操作说明供您参考。具体情况如下
要理解H5的draggable属性，请参考下面的代码注释。
！声明文档类型
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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。