移动端拖拽排序 html,使用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'

});

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

qinqin.gif