美文网首页前端知识
Vue+SortableJS实现拖拽排序及置顶

Vue+SortableJS实现拖拽排序及置顶

作者: yimi珊 | 来源:发表于2019-01-21 21:03 被阅读1次

sortable --- GitHub地址
sortable---Examples地址

  1. 安装
npm install sortablejs --save-dev
  1. 使用
<template>
        <ul class="list" id="list">
            <li v-for="(item,index) in items">
                <p>
                    <b>{{item.nm}}</b>
                    <em>{{item.enm}}</em>
                </p>
                <div class="btns">
                    <button class="btn_no" @click="btnUp(index)">
                        <i class="sprites_all sprites_up"></i>
                    </button>
                </div>
                <div class="btns btn_move">
                    <button class="btn_no">
                        <i class="sprites_all sprites_draw"></i>
                    </button>
                </div>
            </li>
        </ul>
</template>
<script>
    import Sortable from 'sortablejs'
    export default {
        data() {
            return {
                uwasc:true,
                idx:'1',
                items: [{
                    id:1,
                    nm: '澳元日元',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '-255%',
                    sel: false,
                }, {
                    id:2,
                    nm: '澳元日元1',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:3,
                    nm: '澳元日元2',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:4,
                    nm: '澳元日元3',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:5,
                    nm: '澳元日元4',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:6,
                    nm: '澳元日元5',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:7,
                    nm: '澳元日元5',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:8,
                    nm: '澳元日元5',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:9,
                    nm: '澳元日元5',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }],
            }
        },
        mounted () {
            var $ul = this.$el.querySelector('#list')
            new Sortable($ul, {
                handle: '.btn_move', 
                animation: 150
            });
        },
        methods:{
            btnUp(index){
                var item = this.items[index];
                this.items.splice(index,1);
                this.items.unshift(item);
            },
        }
    }
</script>

相关文章

  • Vue+SortableJS实现拖拽排序及置顶

    sortable --- GitHub地址sortable---Examples地址 安装 使用

  • POS-2017

    拖拽排序功能 实现方法: 使用jquery的Sortable功能可以实现拖拽功能 index页面 html部分 商...

  • UITableView系统拖动--学习分享

    上一节已经尝试使用自定义tableview实现拖拽排序效果,本节顺带介绍分享下系统的tableview的拖拽排序功...

  • iOS collectionView拖拽排序

    iOS collectionView拖拽排序 iOS collectionView拖拽排序

  • React Dnd 实现横向和纵向拖拽排序

    接昨天说到的 React Dnd 基本拖放功能实现及 API 整理 我们试着做一个简单的需求,拖拽排序。 原理 用...

  • source code:TableviewGroup阴影加圆角

    长按拖拽排序(上传者:yeliang_new)长按拖拽排序,拖拽排序。拖拽排序是新闻类的App可以说是必有的交互设...

  • iOS collectionView拖拽排序

    项目中首页按钮按照需求需要实现拖拽排序并且记录排序后的布局,下次再进入APP后展示排序后的布局。 功能分析 实现此...

  • 数据结构基础学习之(内排序)

    学习知识 排序基本概念 插入排序的实现方法及性能分析 交换排序的实现方法及性能分析 选择排序的实现方法及性能分析 ...

  • React实现拖拽排序

    最近有个需求, 需要实现一下拖拽排序, 不需要动画, 能实现功能即可. 现有的类库就不太想集成, 自己手撸一下, ...

  • iOS 拖拽排序实现

    老早之前说要做这个,主要是看了微博的一个转发,然后发现其实系统已经有自带的功能了。不管怎么样,先写一下基于UICo...

网友评论

    本文标题:Vue+SortableJS实现拖拽排序及置顶

    本文链接:https://www.haomeiwen.com/subject/fxmhjqtx.html