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

效果图:

gif5新文件.gif

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

npm 安装

$ npm install sortablejs --save

bower安装

$ bower install --save sortablejs

当然还有直接引入


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

下面是HTML代码:

以及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'
    });

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


使用jquery制作拖放排序功能(移动端PC端均可适用)_第1张图片
qinqin.gif

你可能感兴趣的:(使用jquery制作拖放排序功能(移动端PC端均可适用))