Vue.Draggable

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;
            };
        }    

    },

原文地址:https://www.cnblogs.com/QQPrincekin/p/10439174.html

时间: 2024-10-13 00:35:35

Vue.Draggable的相关文章

Vue.Draggable学习总结

Draggable为基于Sortable.js的vue组件,用以实现拖拽功能. 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以和现有的UI组件兼容 安装 npm install vuedraggable 引入 import draggable from 'vuedraggable' 官方例子: hello.vue <template> &l

插件Vue.Draggable(5000&#127775;)

安装资源库:从Vue资源:https://github.com/vuejs/awesome-vue下载 Libraries/UI Components/Form/Drag and Drop yarn add vuedraggable (5000??)     (点击查看git)   特色: 全面支持Sortable.js功能 触摸屏幕 drag handles and selectable text Smart auto-srolling 在不同lists间拖拉放置 无需JQuery 保持同步H

vue draggable 火狐拖拽搜索问题

最近在使用vuedraggable做导航时候,谷歌拖拽是没问题的,但是在火狐测试时候,拖拽时候是可以成功,但是火狐还是打开了一个新的tab,并且搜索了,一开始想着是阻止默认行为,但是在@end时间中阻止了默认行为,使用vue的.prevent.stop也是不行, 后来各种搜索后在这里才找到答案 传送 我是在created中添加了 created() { document.body.ondrop = function (event) { event.preventDefault(); event.

Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 易用(已经会了HTML,CSS,J

【转】手摸手,带你用vue撸后台 系列三(实战篇)

前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen,那时候vue2 刚发没多久,市面上也没有很多其它的vue2的ui框架.虽然Element也有很多的不足,前期的bug也不少,但我还是选择了它,说一下我选择Element的原因吧: 有大厂背书 : 虽然核心开发只有三个人,但至少不用担心哪天就不维护,带着小姨子跑路了. 持续迭代 : Element发版

Vue开源

Vue开源 - 为移动而生的Vue JS 2组件框架 vonic ★1494 - 快速构建移动端单页应用 eme ★1390 - 优雅的Markdown编辑器 vue-multiselect ★1166 - Vue.js选择框解决方案 vue-table ★824 - 简化数据表格 VueCircleMenu ★776 - 漂亮的vue圆环菜单 vue-chat ★748 - vuejs和vuex及webpack的聊天示例 radon-ui ★633 - 快速开发产品的Vue组件库 vue-wa

【前端】Vue.js经典开源项目汇总

Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过

这可能是目前最新的 Vue 相关开源项目库汇总(转)

访问地址:https://juejin.im/entry/58bf745fa22b9d0058895a58 原文链接:https://github.com/opendigg/awesome-github-vue awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. 如果收录的项目有错误,可以通过issue反馈给我们.这里的项目Star数不是实时更新的,一般是一周更新一次. UI组件

vue 插件

UI组件 element ★9305 - 饿了么出品的Vue2的web UI工具套件 Vux ★6802 - 基于Vue和WeUI的组件库 mint-ui ★4776 - Vue 2的移动UI元素 iview ★4458 - 基于 Vuejs 的开源 UI 组件库 Keen-UI ★2363 - 轻量级的基本UI组件合集 vue-material ★2207 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★1992 - 三端样式一致的响应式 UI 库 vuet