使用jquery制作拖放排序功能(移动端PC端均可适用)

效果图：

gif5新文件.gif

类似于这种效果，首先，无论是用源生写法，jq写法，亦或者vue等，都要借助一个工具 Sortable.js 。

npm 安装

$ npm install sortablejs --save

bower安装

$ bower install --save sortablejs

当然还有直接引入

<script src="./Sortable.js"></script>

剩下的html，css怎样布局都无妨，重要的是要有一个统一的父元素。

下面是HTML代码：

<div class="wrap" id="gridDemo">
        <div class="item"><img src="timg11.jpeg"></div>
        <div class="item"><img src="timg11.jpeg"></div>
        <div class="item"><img src="timg11.jpeg"></div>
        <div class="item"><img src="timg11.jpeg"></div>
        <div class="item"><img src="timg11.jpeg"></div>
        <div class="item"><img src="timg11.jpeg"></div>
        <div class="item"><img src="touxiang.jpg"></div>
        <div class="item"><img src="touxiang.jpg"></div>
        <div class="item"><img src="touxiang.jpg"></div>
    </div>

以及css代码：

        .wrap{
            margin: 20px auto 0;
            width: 490px;
            height: 580px;
            border: 1px solid #000;
            position: relative;
        }

        .wrap .item{
            width: 150px;
            height: 180px;
            float: left;
            margin: 5px;
            border-radius: 5px;
            background: #ff3355;
            border: 1px solid lightgray;
            text-align: center;
            cursor: move; 
        }

        .wrap .item img{
            width: 150px;
            height: 180px;
        }

        .moving{
            border: 1px dashed gray;
            background: white;
        }
        .wrap div.active{
            width: 150px;
            height: 180px;
            position: absolute;
            background: goldenrod;
            box-shadow: 0 0 2px 2px #555;
            border-radius: 5px;
            z-index: 10;
        }

对重要的还是js：

var gridDemo = document.getElementById('gridDemo');
    new Sortable(gridDemo, {
        animation: 150,
        ghostClass: 'blue-background-class'
    });

完成这三项，则大事已成。喜欢的小老弟可以点个关注，点关注不迷路亲亲！！

qinqin.gif