精华内容
下载资源
问答
  • Vue.Draggable Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array. Based on and offering all features of Sortable.js For Vue ...
  • Draggable.vue

    2021-03-24 13:36:45
    基于Vue2.x版本垂直拖拽组件
  • npm install draggable-vue-directive --save 演示版 您可以在此处查看现场演示: : 例子 没有处理程序 classic draggable .vue文件: import { Draggable } from 'draggable-vue-directive' ... export ...
  • 在使用的文件中导入draggable组件 import draggable from "vuedraggable"; <template> <div> <!--使用draggable组件--> <draggable v-model="myArray" chosenClass="chosen" group=...

    一个简单的拖拽demo

    先安装依赖库

    下载依赖
    npm i -S vuedraggable
    在使用的文件中导入draggable组件
    import draggable from "vuedraggable";
    
    <template>
      <div>
        <!--使用draggable组件-->
        <draggable
          v-model="myArray"
          chosenClass="chosen"
          group="people"
          animation="1000"
          @start="onStart"
          @end="onEnd"
        >
          <transition-group>
            <div class="item" v-for="element in myArray" :key="element.id">
              {{ element.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
    </template>
    <style scoped>
    /*被拖拽对象的样式*/
    .item {
      background: pink;
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      padding: 6px;
      background-color: #fdfdfd;
      border: solid 1px #eee;
      margin-bottom: 10px;
      cursor: move;
    }
    /*选中样式*/
    .chosen {
      border: solid 1px #3089dc !important;
    }
    </style>
    <script>
    //导入draggable组件
    import draggable from "vuedraggable";
    export default {
      //注册draggable组件
      components: {
        draggable,
      },
      data() {
        return {
          drag: false,
          //定义要被拖拽对象的数组
          myArray: [
            { people: "小黑", id: 10, name: "大家好我是小黑" },
            { people: "小白", id: 20, name: "大家好我是小白" },
            { people: "小红", id: 30, name: "大家好我是小红" },
            { people: "小吕", id: 40, name: "大家好我是小吕" },
          ],
        };
      },
      methods: {
        //开始拖拽事件
        onStart() {
          this.drag = true;
        },
        //拖拽结束事件
        onEnd() {
          this.drag = false;
        },
      },
    };
    </script>
    
    展开全文
  • Vue.component('vue-draggable-resizable', VueDraggableResizable) You may now use the component in your markup <template> <div style="height: 500px; width: 500px; border: 1px solid red; ...
  • Vue.Draggable 文档总结

    万次阅读 多人点赞 2018-04-03 21:38:15
    Vue.Draggable学习总结 Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2...

    Vue.Draggable学习总结

    Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。

    特性

    • 支持触摸设备
    • 支持拖拽和选择文本
    • 支持智能滚动
    • 支持不同列表之间的拖拽
    • 不以jQuery为基础
    • 和视图模型同步刷新
    • 和vue2的国度动画兼容
    • 支持撤销操作
    • 当需要完全控制时,可以抛出所有变化
    • 可以和现有的UI组件兼容

    安装

    npm install vuedraggable

    引入

    import draggable from 'vuedraggable'

    基础用法

    定义一个json串 list,实现它的拖拽排序。

    <template>
      <div>
        <!-- 调用组件  -->
        <draggable element="ul" v-model="list">
          <li v-for="item in list">{{item.name}}</li>
        </draggable>
        <!-- 输出list数据 -->
        {{list}}
      </div>
    </template>
    
    <script>
    // 引入拖拽组件
    import draggable from 'vuedraggable'
    export default {
      name: 'demo',
      components: {
        //调用组件
        draggable,
      },
      data () {
        return {
          list:[
            {
              id: 1,
              name: 'a'
            },
            {
              id: 2,
              name: 'b'
            },
            {
              id: 3,
              name: 'c'
            },
            {
              id: 4,
              name: 'd'
            },
            {
              id: 5,
              name: 'e'
            },
            {
              id: 6,
              name: 'f'
            },
          ]
        }
      },
    }
    </script>

    属性

    value

    Array,非必须,默认为null

    • 用于实现拖拽的list,通常和内部v-for循环的数组为同一数组。
    • 最好使用vuex来实现传入。
    • 不是直接使用,而是通过v-model引入。
    <draggable v-model="myArray">

    list

    Array,非必须,默认为null

    • 就是value的替代品。
    • v-model不能共用
    • 从表现上没有看出不同

    element

    String,默认div

    • 就是<draggable>标签在渲染后展现出来的标签类型
    • 也是包含拖动列表和插槽的外部标签
    • 可以用来兼容UI组件

    options

    Object

    • 配置项
    • group: string or array 分组用的,同一组的不同list可以相互拖动
    • sort: boolean 定义是否可以拖拽
    • delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间
    • touchStartThreshold:number (不清楚)
    • disabled: boolean 定义是否此sortable对象是否可用,为true时sortable对象不能拖放排序等功能
    • store:
    • animation: umber 单位:ms 动画时间
    • handle: selector 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动
    • filter: selector 格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器,中间用“,”分隔
    • preventOnFilter: 当拖动filter时是否触发event.preventDefault()默认触发
    • draggable: selector 格式为简单css选择器的字符串,定义哪些列表单元可以进行拖放
    • ghostClass: selector 格式为简单css选择器的字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况,此配置项就是来给这个影子单元添加一个class,我们可以通过这种方式来给影子元素进行编辑样式
    • chosenClass: selector 格式为简单css选择器的字符串,目标被选中时添加
    • dragClass:selector 格式为简单css选择器的字符串,目标拖动过程中添加
    • forceFallback: boolean 如果设置为true时,将不使用原生的html5的拖放,可以修改一些拖放中元素的样式等
    • fallbackClass: string 当forceFallback设置为true时,拖放过程中鼠标附着单元的样式
    • dataIdAttr: data-id
    • scroll:boolean当排序的容器是个可滚动的区域,拖放可以引起区域滚动
    • scrollFn:function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … } 用于自定义滚动条的适配
    • scrollSensitivity: number 就是鼠标靠近边缘多远开始滚动默认30
    • scrollSpeed: number 滚动速度

    函数配置

    • setData: 设置值时的回调函数
    • onChoose: 选择单元时的回调函数
    • onStart: 开始拖动时的回调函数
    • onEnd: 拖动结束时的回调函数
    • onAdd: 添加单元时的回调函数
    • onUpdate: 排序发生变化时的回调函数
    • onRemove: 单元被移动到另一个列表时的回调函数
    • onFilter: 尝试选择一个被filter过滤的单元的回调函数
    • onMove: 移动单元时的回调函数
    • onClone: clone时的回调函数
    • 以上函数对象的属性:
      • to: 移动到的列表的容器
      • from:来源列表容器
      • item: 被移动的单元
      • clone: 副本的单元
      • oldIndex:移动前的序号
      • newIndex:移动后的序号

    clone

    function,默认值: 无处理

    • 这一项要配合着optionsgroup项的pull项处理,当pull:'clone时的拖拽的回调函数’
    • 就是克隆的意思。
    • 可以理解为正常的拖拽变成了复制。
    • 当为true时克隆

    move

    function,默认值:null

    • 就是拖拽项时调用的函数
    • 用来确定拖拽是否生效
    • 返回null时可以生效
    • 可以通过函数判断
    • 有一个参数:evt
      • evt为object
      • draggedContext: 被拖拽元素的上下文
        • index:拖拽元素的指针
        • element: 拖拽数据本身
        • futureIndex: 拖动后的index
      • relatedContext: 拖入区域的上下文
        • index: 目标元素的index
        • element:目标数据本身
        • list: 拖入的列表
        • component:目标组件
    <draggable element="ul" v-model="list" :move='allow'>
    ...
    methods: {
      allow(evt) {
        console.log(evt.draggedContext.index)
        console.log(evt.draggedContext.element)
        console.log(evt.draggedContext.futureIndex)
        console.log(evt.relatedContext.index)
        console.log(evt.relatedContext.element)
        console.log(evt.relatedContext.list)
        console.log(evt.relatedContext.component)
        return (evt.draggedContext.element.name!== 'b')
      }
    }

    componentData

    Object,默认值:null

    • 用来结合UI组件的,可以理解为代理了UI组件的定制信息
    • 包含两项:propson
      • props用来代理UI组件需要绑定的属性(:)
      • on用来代理UI组件需要绑定的事件(@)
    <draggable element="el-collapse" :list="list" :component-data="getComponentData()">
      <el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
        <div>{{e.description}}</div>
       </el-collapse-item>
    </draggable>
    methods: {
      handleChange() {
        console.log('changed');
      },
      inputChanged(value) {
        this.activeNames = value;
      },
      getComponentData() {
        return {
          on: {
            change: this.handleChange,
            input: this.inputChanged
          },
          props: {
            value: this.activeNames
          }
        };
      }
    }

    事件

    有以下几种

    start, add, remove, update, end, choose, sort, filter, clone

    参数带有如下属性:

    • add: 包含被添加到列表的元素
      • newIndex: 添加后的新索引
      • element: 被添加的元素
    • removed: 从列表中移除的元素
      • oldIndex: 移除前的索引
      • element: 被移除的元素
    • moved:内部移动的
      • newIndex: 改变后的索引
      • oldIndex: 改变前的索引
      • element: 被移动的元素

    插槽

    提供一个footer插槽,在排序列表之下。
    永远位于最下方。

    <draggable v-model="myArray" :options="{draggable:'.item'}">
        <div v-for="element in myArray" :key="element.id" class="item">
            {{element.name}}
        </div>
        <button slot="footer" @click="addPeople">Add</button>
    </draggable>
    展开全文
  • npm install vue-draggable <!-- or --> yarn add vue-draggable 设置 安装插件 import Vue from 'vue' import VueDraggable from 'vue-draggable' Vue . use ( VueDraggable ) 本地设置指令 import { ...
  • 1.npm install draggable-vue-directive --save 2.<div v-draggable> classic draggable 3. import { Draggable } from 'draggable-vue-directive' ... export default { directives: { Draggable, }, ... 4...
  • 参考:https://blog.csdn.net/zjiang1994/article/details/79809687。
    展开全文
  • 记使用一次vue-draggable

    2019-12-20 09:47:56
    vue-draggable 最近公司项目中需要做一个可拖拽的菜单列表、需要实现可拖拽、有序换位的功能、本来打算自己写一个、逛论坛时发现 vue-draggable vue 安装: npm i -S vuedraggable 按需引入: import draggable from ...

    vue-draggable

    最近公司项目中需要做一个可拖拽的菜单列表、需要实现可拖拽、有序换位的功能、本来打算自己写一个、逛论坛时发现 vue-draggable

    vue

    安装:
    npm i -S vuedraggable
    
    按需引入:
    import draggable from 'vuedraggable'
    components:{
       draggable
    }
    
    template
    //设置父元素的宽高
     <draggable :options="{draggable:'.item'}"
                 v-model="list2"
                 @change="change"
                 @start="start"
                 @end="end"
                 :move="move"
                 style="display: inline-block; width:100%;height: 100%;background: #eee;overflow: auto">
               <li v-for="(item, index) in workList"  class="item" :key="index">
                 {{item.name}}
               </li>
             </draggable>
    
    methods
      change: function(evt) {
         // console.log(evt)
       },
       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) // 鼠标位置
       }
    
    options的可配置项有很多、收集了一部分
    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
    
    
    展开全文
  • vue.draggable.next Vue component (Vue.js 3.0) allowing drag-and-drop and synchronization with view model array. For Vue 2 and Vue 1 version check: https://github.com/SortableJS/Vue.Draggable ...
  • Vue-draggable 的github传送门 : https://github.com/SortableJS/Vue.Draggable 一. 下载依赖包:npm install vuedraggable -S  二. 在需要使用的当前界面引入依赖,注册组件: import draggable from ...
  • vue-draggable-list Vue拖拽组件列表实现动态页面配置 需求描述 最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装起来的视图,...
  • Draggable is no longer maintained by its original authors. Maintenance of this repo has been passed on to new collaborators and is no longer worked on by anyone at Shopify. We are still looking for ...
  • Please use the , vue-draggable-nested-tree will no longer be maintained. 请使用新发布的, vue-draggable-nested-tree 将不再维护. Please use the , vue-draggable-nested-tree will no longer be maintained. ...
  • Vue.Draggable

    2019-10-01 23:25:04
    Vue.Draggable拖动效果 下载包:npm install vue-draggable --save 组件中引进依赖: import draggable from 'vuedraggable' 注册:draggable这个组件 components: {  draggable }, <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,167
精华内容 1,266
关键字:

draggablevue

vue 订阅