php jquery 拖拽排序,jQuery-ui插件sortable实现自由拖动排序

本文为大家分享了jQuery ui插件sortable实现自由拖动排序的具体方法，供大家参考，具体内容如下

此为网上资源demo自己做了修改，记录下方便日后的学习。

效果展示：

代码展示：

终极版拖动排序

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.container {

width: 350px;

margin: 60px auto;

}

.container:after {

content: "";

display: block;

clear: both;

}

.drag {

width: 100%;

height: 60px;

float: left;

margin: -8px 0;

}

ul li {

list-style: none;

}

.innerdiv {

padding: 10px;

height: 100%;

}

.innerdiv2 {

border: 1px solid #bdb9b9;

background: #fff;

height: 100%;

}

.move {

width: 65px;

height: 100%;

background: pink;

float: right;

cursor: pointer;

}

.msg {

display: inline-block;

width: 130px;

padding: 6px 6px 6px 12px;

vertical-align: top;

}

.btn {

background: pink;

color: #fff;

padding: 0px 10px;

border-radius: 4px;

border: 1px;

height: 30px;

cursor: pointer;

font-size: 1.4rem;

float: right;

margin-right: 10px;

margin-top: 10px;

}

• list1

• list2

• list3

• list4

• list5

• list6

提交

$(function () {

var bttn = $('.container .btn');

var arr = '';

var sort = $(".sortable").sortable({

handle: ".move",

delay: 0,

cursor: 'move',

revert: true,

stop: bttn.click(function (event) {

//记录sort后的id顺序数组

var arr = $(".sortable").sortable('toArray');

console.log(arr);

})

});

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。