Vue拖拽排序组件Vue-Slicksort解读

目录
  • 一、效果图
  • 二、安装组件
  • 三、使用组件
  • 四、组件参数
  • 五、组件方法
    • HandleDirective
  • 总结

一、效果图

二、安装组件

npm i vue-slicksort -S

三、使用组件

<div class="maintenance_img mt50 mb50 pl20 pr20" style="font-size: 16px;font-weight: 600;position: relative;">
    <!-- 拖拽 -->
    <SlickList
        :lockToContainerEdges="true"
        lockAxis="x"
        axis="x"
        v-model="maintenanceData.img_list"
        @input="getChangeLists"
        style="display: flex"
        >
        <SlickItem style="z-index: 10000" v-for="(item, index) in maintenanceData.img_list" :index="index" :key="index">
            <div class="maintenance_top">
                <img :src="item" @mouseover="changeMask(index)" @mouseout="changeMask(index)" alt="">
            </div>
        </SlickItem>
    </SlickList>
    <div style="display: flex;position: absolute;bottom: -15px;">
        <div class="maintenance_icon" v-for="(item, index) in maintenanceData.img_list" :key="index">
            <div class="img_bg" :ref="'mask' + index" @mouseover="changeMask(index)" @mouseout="changeMask(index)">
                <Icon @click.stop="isImgShow = true;bigImg = item" class="pointer" size="20" color="#000000" type="md-search" />
                <Icon @click.stop="downloadImg(item)" class="pointer" size="20" color="#000000" type="md-download" />
                <Icon @click.stop="movingItems(4, index)" class="pointer" size="20" color="#000000" type="md-trash" />
            </div>
        </div>
    </div>
    <!-- 600*330 -->
    <div class="add-img" v-if="maintenanceData.img_list.length<5">
        <span>
            <Icon type="md-add" size="30"></Icon>
        </span>
        <p>添加图片</p>
        <input @change="uploadImegs($event, 1)" type="file" accept="image/*" />
    </div>
</div>
    import { SlickList, SlickItem } from "vue-slicksort";
    export default {
        components:{
            SlickItem,
            SlickList
        },
        data() {
            return {
                maintenanceData: {
                    img_list: [], //图片
                },
            }
        },
        created() {

        },
        methods: {
            getChangeLists(vals) {
                // 拖拽完成后返回新的排序数组
                console.log(vals);
            },
        },
    }
.maintenance_top {
    display: flex;
    z-index: 10000;
}
.maintenance_top {
    width: 140px;
    height: 78px;
    border: 1px dashed #ccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 15px;
}
.maintenance_top > img{
    max-width: 138px;
    max-height: 138px;
    border-radius: 6px;
}
.maintenance_icon{
    width: 140px;
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 15px;
}
.maintenance_img{
    display: flex;
}
.maintenance_img>div>div{
    z-index: 10000;
}
.maintenance_img > .add-img{
    display: block;
    width: 140px;
    height: 78px;
    border-radius: 6px;
}
.img_bg{
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: -20px;
    left: 0;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: space-evenly;
}

四、组件参数

名称 类型 默认值 说明
value Array - 列表的内容
axis String y 列表元素可以被横向拖拽,纵向拖拽还是网格拖拽。用x,y,xy来表示
lockAxis Array - 用于排序时在坐标系中锁定元素的移动
helperClass String - helper的自定义样式类
transitionDuration Number 300 元素移动动画的持续时间
pressDelay Number 0 如果需要当元素被按下一段时间再允许拖拽,可以设置这个属性
pressThreshold Number 5 移动允许被忽略的阈值,单位是像素
distance Number 0 如果需要在拖拽出一定距离之后才被识别为正在拖拽的元素,可以设置这个属性
useDragHandle Boolean false 如果使用HandleDirective,设置为true
useWindowAsScrollContainer Boolean false 是否设置window为可滚动的容器
hideSortableGhost Boolean true 是否自动隐藏ghost元素
lockToContainerEdges Boolean false 是否对正在拖拽的元素锁定容器边缘
lockOffset String 50% 对正在拖拽的元素锁定容器边缘的偏移量
shouldCancelStart Function - 在拖拽开始前这个方法将被调用
getHelperDimensions Function - 可选方法({node, index, collection}),用于返回SortableHelper的计算尺寸

五、组件方法

名称 参数 说明
sortStart event, node, index, collection 当拖拽开始时触发
sortMove event 当拖拽时鼠标移动时触发
sortEnd event, newIndex, oldIndex, collection 当拖拽结束时触发
input newList 当拖拽结束后产生新的列表时触发

HandleDirective

v-handle 指令在可拖动元素内部使用。(即用了这个指令,可以让拖动只在元素的某个位置生效)

Container 必须由 :useDragHandle 属性,且设置为 true 时才能正常工作。

这里有关于此的一个简单元素的例子:

<template>
	<li class="list-item">
	    <!-- 拖动只在 span 元素上生效 -->
	    <span v-handle class="handle"></span>
	    {{item.value}}
	</li>
</template>

<script>
    import { ElementMixin, HandleDirective } from 'vue-slicksort';

    export default {
        mixins: [ElementMixin],
        directives: { handle: HandleDirective },
    };
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue实现列表拖拽排序的功能

    在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触

  • vue拖拽组件vuedraggable使用说明详解

    vue拖拽组件vuedraggable的使用说明,供大家参考,具体内容如下 需了解H5的draggable属性,通过下面的代码注释,可了解 <!DOCTYPE html>   <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-widt

  • Vue 基于 vuedraggable 实现选中、拖拽、排序效果

    今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动. 其实我之前基于 Sortable 做过一个类似的效果.也给他看过了,没看太明白,他就自己基于 vuedraggable 实现了一下. 正好有点问题给他解决了一下.废话不多说,先上最终效果:Vue 拖拽排序效果 测试地址.下面就是最终效果图. 效果一:实现选中 和 全选效果 就下面这样,elementUI 官方 Demo.很简单毫无挑战呀. <el-checkbox :indeter

  • React.js组件实现拖拽排序组件功能过程解析

    因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使

  • vue拖拽排序插件vuedraggable使用方法详解

    大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入 首先在vue项目中,用npm包下载下来 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import draggable from 'vuedraggable' 别忘了下面要注册组件 components: { dr

  • vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

    vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档) 效果图: -------------------------------------------------------------------------------- 首先需要安装vuedraggable依赖包: npm install vuedraggable --save 因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下 np

  • 基于Vue实现平滑过渡的拖拽排序功能

    最近重读Vue官方文档,在 列表的排序过渡 这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下: 例子中实现的效果看起来还是非常不错的,这个效果使我想起来另外一个使用场景,之前我在实现一个列表展示需求的时候,PM想让这个列表具有拖动排序的功能,方便他操作(事实上我最后并没有给他做哈哈),拖动的动画跟这个很像,网上搜索一下,类似插件应该很多,那如果我们自己来实现一个,问题在哪里呢? 首先要拖拽元素,记录元素拖拽

  • vue.draggable实现表格拖拽排序效果

    本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码,供大家参考,具体内容如下 主要使用vuedraggable和sortablejs两个组件. 1.安装组件 npm install vuedraggable npm install sortablejs 2.引入组件 import draggable from 'vuedraggable'; import Sortable from 'sortablejs'; export default { components:

  • vue实现拖拽排序效果

    本文实例为大家分享了vue实现拖拽排序效果的具体代码,供大家参考,具体内容如下 效果预览 组件 drag.vue <template>   <TransitionGroup name="group-list" tag="ul">     <li       v-for="(item, index) in list"       :key="item.name"       :draggable=&

  • vue中实现拖拽排序功能的详细教程

    目录 原生拖拽 API 实现拖拽 设置元素 dragable 拖放事件 拖拽排序 拖拽API + 防抖实现 vue awe-dnd 拖拽组件 安装 awe-dnd 组件库 在 main.js 中将 awe 挂载到全局 实现案例 项目中-- 拖拽的效果 不理想 vue-smooth-DnD 安装 smooth-dnd API: container smooth-dnd 生命周期 回调 事件 API: Draggable 效果实现 项目中实现 – 拖拽位置无法确定 vuedraggable 安装 引

  • Vue拖拽组件开发实例详解

    为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: •使用虚拟DOM: •轻量级框架: •高效的数据绑定: •灵活的组件系统: •完整的开发生态链. 这就是我们为什么选择Vue框架的一些原因. 为什么要封装成一个Vue组件? 主要目的是可提高代码的复用性和可维护性. •复用性:组件化后,一些样式和逻辑均通过配置参数的方式去差异化体现,所以参数的可配置性提高了组件的复用

  • Vue拖拽组件列表实现动态页面配置功能

    需求描述 最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装起来的视图,可以实现上下拖拽改变顺序,也可以删除. 根据这个需求我做了下面这个demo. 功能分解 右边的组件列表,可以通过拖拽克隆到左边,拖拽结束后右边组件列表数量不会减少 左边的组件可以展开或收起 左边的组件可以上下拖拽,删除,但不可向右边拖拽 左边组件拖拽过程中不改变其展开和收起状态 demo截图 代码地址 vue-draggable-list 代码预览 <

随机推荐

其他