Vue-Draggable,vue实现div拖拽
本文主要详细介绍vue-draggable实现pc端拖动效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue-draggable实现pc端拖动效果的具体代码，供大家参考。具体内容如下
要实现下面的布局，可以通过拖拽来整合和调整位置。
拖拽前：
拖拽后：
一、安装
NPM I-S vuedragable
二、使用
引入：
从“vuedraggable”导入可拖动的
注册
组件：{
可拖动的
},
使用
draggable:options= { group: people ，animation:150，ghostClass:sortable-ghost ，chosenClass:chosenClass ，scroll:true，scrollSensitivity:200}
v-model=list2
@change=change
@start=start
@end=end
:move=move
style= display:inline-block；宽度：190px高度：200px背景：# eee溢出：自动
列表2中的li v-for=(item，index)
:key=index
{{item.name}}
/李
/可拖动
2: [{value: 1，name: China }，{value: 1，name: China }，{value:1，name: China}]，
事件：
//evt中有两个值，一个evt.added，另一个evt.removed可以分别知道移动元素的ID和删除元素的ID。
变化：功能(evt) {
控制台. log(evt)
},
//开始、结束、添加、更新、排序、删除都弄得差不多了。
开始：功能(evt) {
控制台. log(evt)
},
end:函数(evt) {
控制台. log(evt)
Evt.item //可以知道拖动本身
Evt.to //可以知道被拖动目标的列表。
Evt.from //可以知道之前的列表
Evt.oldIndex //拖动前可以知道位置
Evt.newIndex //拖动后可以知道位置。
},
移动：函数(evt，originalEvent) {
控制台. log(evt)
Console.log(originalEvent) //鼠标位置
}
属性
Group: name ，//或{name: . ，pull: [true，false，clone]，put: [true，false，array]}同名的名称组可以互相拖动。
Sort: true，//内部排序列表
Delay: 0，//定义排序开始的时间，以毫秒为单位。
TouchStartThreshold: 0，//px，点要移动多少像素才能取消延迟拖动事件？
Disabled: false，//如果设置为true，则禁用可排序。
store: null，//@see Store
动画：150，//ms，运动物品排序时的动画速度， 0 -无动画。
句柄：。my-handle ，//拖动列表项中的句柄选择器。
筛选器：。 ignore-elements ，//不会导致拖放的选择器(字符串或函数)
PreventOnFilter: true，//调用“event.preventDefault()”时触发“过滤器”。
可拖动：。item ，//指定元素中的哪些项应该是可拖动的。
GhostClass: sortable-ghost ，//为被拖动元素的类设置占位符的类名。
choosed class: sortable-chosen ，//设置所选元素的类。
DragClass: sortable-drag ，//拖动元素的类。
dataIdAttr:数据标识，
ForceFallback: false，//忽略HTML5的DnD行为并强制退出。(h5中有一个属性也是拖拽，这里是去除H5拖拽对这个的影响)
FallbackClass: Sortable-Fallback ，//使用forceFallback时克隆的DOM元素的类名。
Fallbackbody: false，//将克隆的DOM元素添加到文档正文中。(默认放置在被拖动元素的同一层)
FallbackTolerance: 0，//指定鼠标在被视为拖动之前应该移动的距离，以像素为单位。
scroll: true，//或HTMLElement
scrollFn: function(offsetX，offsetY，originalEvent，touchEvt，hoverTargetEl) {.}，//如果您有自定义滚动条，scrollFn可用于自动滚动
scrollSensitivity: 30，//px，鼠标必须多靠近一条边才能开始滚动。
scrollSpeed: 10，//px
slot：
使用页脚槽在vuedraggable组件中添加不可拖动的元素。重要：它应该与draggable选项一起使用来标记可拖动的元素。请注意，默认情况下将始终添加页脚位置。
可拖动的v-model= myArray :options= { draggable:。项目“}”
div v-for= myArray中的元素：key=element.id class=item
{{element.name}}
/div
button slot= footer @ click= addPeople add/button
/可拖动
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。