Vue.Draggable拖动效果

下载包:npm install vue-draggable --save

组件中引进依赖:

import draggable from 'vuedraggable'
 
注册:draggable这个组件
components: {
  draggable
},
<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; width:190px;height: 200px;background: #eee;overflow: auto">
<li v-for="(item, index) in list2"
:class="setclass(item,index)"
:key="index">
{{item.name}}
</li>
</draggable>

事件

//evt里面有两个值,一个evt.added 和evt.removed  可以分别知道移动元素的ID和删除元素的ID
change: function (evt) {
console.log(evt)
},
//start ,end ,add,update, sort, remove 得到的都差不多
start: function (evt) {
console.log(evt)
},
end: function (evt) {
console.log(evt)
evt.item //可以知道拖动的本身
evt.to // 可以知道拖动的目标列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖动前的位置
evt.newIndex // 可以知道拖动后的位置
},
move: function (evt, originalEvent) {
console.log(evt)
console.log(originalEvent) //鼠标位置
}

属性

group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
sort: true, // 内部排序列表
delay: 0, // 以毫秒为单位定义排序何时开始。
touchStartThreshold: 0, // px,在取消延迟拖动事件之前,点应该移动多少像素?
disabled: false, // 如果设置为真,则禁用sortable。
store: null, // @see Store
animation: 150, // ms, 动画速度运动项目排序时,' 0 ' -没有动画。
handle: ".my-handle", // 在列表项中拖动句柄选择器。
filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数)
preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
draggable: ".item", // 指定元素中的哪些项应该是可拖动的。
ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。
chosenClass: "sortable-chosen", // 设置被选中的元素的class
dragClass: "sortable-drag", //拖动元素的class。
dataIdAttr: 'data-id', forceFallback: false, // 忽略HTML5的DnD行为,并强制退出。(h5里有个属性也是拖动,这里是为了去掉H5拖动对这个的影响)
fallbackClass: "sortable-fallback", // 使用forceFallback时克隆的DOM元素的类名。
fallbackOnBody: false, // 将克隆的DOM元素添加到文档的主体中。(默认放在被拖动元素的同级)
fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。 scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px

拖动中

拖动结束

methods: {
getdata (evt) {
console.log(evt.draggedContext.element.id)
},
datadragEnd (evt) {
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
console.log(this.tags)
}
}

Vue.Draggable链接地址:  https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2FSortableJS%2FVue.Draggable

自说自话,自己打自己脸\(^o^)/~)

自封装拖动效果

<div id="app" @mousedown="move">       <!--绑定按下事件-->

methods:{
move(e){
let odiv = e.target; //获取目标元素 //算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{ //鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY; //绑定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left; //移动当前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
} },

Vue.Draggable的更多相关文章

  1. Vue.Draggable 文档总结

    本文章转自https://blog.csdn.net/zjiang1994/article/details/79809687 Vue.Draggable学习总结 Draggable为基于Sortabl ...

  2. Vue.Draggable/SortableJS 的排序功能,在VUE中的使用

    此插件git: https://github.com/SortableJS/Vue.Draggable 基于Sortable.js http://www.cnblogs.com/xiangsj/p/6 ...

  3. Vue.Draggable实现拖拽效果(采坑小记)

    之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...

  4. Vue.Draggable实现拖拽效果(快速使用)

    1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": & ...

  5. Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

  6. 插件Vue.Draggable(5000🌟)

    安装资源库:从Vue资源:https://github.com/vuejs/awesome-vue下载 Libraries/UI Components/Form/Drag and Drop yarn ...

  7. vue draggable 火狐拖拽搜索问题

    最近在使用vuedraggable做导航时候,谷歌拖拽是没问题的,但是在火狐测试时候,拖拽时候是可以成功,但是火狐还是打开了一个新的tab,并且搜索了,一开始想着是阻止默认行为,但是在@end时间中阻 ...

  8. Vue.Draggable拖拽效果

    1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "vuedraggable": ...

  9. Vue开源项目库汇总

    最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...

随机推荐

  1. Django学习之三:django-admin 和 项目manage.py程序

    目录 Django django-admin 和 项目manage.py程序 它俩是什么? 命令程序用法 常用命令 Django django-admin 和 项目manage.py程序 它俩是什么? ...

  2. jsonp promise 封装

    import originJsonp from 'jsonp' export default function jsonp(url, data, option) { url += (url.index ...

  3. npm 安装及使用

    1. 安装 npm 安装完node后,就自动完成npm的安装. 2. 常用的npm命令 #安装包 npm install <pkg> 或者 npm install <pkg>@ ...

  4. 安装完成Dynamics 365 CE后别忘了更改维护作业的运行时间

    摘要: 微软动态CRM专家罗勇 ,回复309或者20190308可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 安装完毕Dy ...

  5. 总结:当静态路由和BGP同时存在时路由优选BGP的两种方法

    结论: 方法一.配置BGP协议的外部优先级比静态路由的优先级高,优选BGP. 优点:配置简单. 缺点:全局生效,如果用户有针对某个静态路由想提高优先级,不受动态路由影响,则针对每个静态路由都需要人为提 ...

  6. Android ScrollView和ListView滑动冲突解决记录

    private int mLastX; private int mLastY; public View.OnTouchListener onTouchListener = new View.OnTou ...

  7. MongoDB:配置与安装

    一.配置环境 1.1进行安装下载msi文件 需要注意的一点是,在安装过程中的图示界面不要勾选左下角“安装MongoDB可视化工具”.这是一个客户端管理工具,在后面会具体描述其功能.由于安装时间非常长, ...

  8. Kotlin入门(32)网络接口访问

    手机上的资源毕竟有限,为了获取更丰富的信息,就得到辽阔的互联网大海上冲浪.对于App自身,也要经常与服务器交互,以便获取最新的数据显示到界面上.这个客户端与服务端之间的信息交互,基本使用HTTP协议进 ...

  9. 一个表里有多个字段需要同时使用字典表进行关联显示,如何写sql查询语句

    参考:https://bbs.csdn.net/topics/330032307 数据库里面有一个字典表,这张表里面有id段和对应的名字字段.在另外一个记录的表里面有对应的上述字典表的id,而且有多个 ...

  10. Linux 查看进程消耗内存情况总结

    在Linux中,有很多命令或工具查看内存使用情况,今天我们来看看如何查看进程消耗.占用的内存情况,Linux的内存管理和相关概念要比Windows复杂一些.在此之前,我们需要了解一下Linux系统下面 ...