HTML中sort有什么属性,sortable.js sort属性是否允许组内排序

sortable.js sort属性是否允许组内排序

sortable.js sort属性是否允许组内排序，注意这并不是不允许拖动而是是否允许排序，比如有多组时，sort设置了false,a组可以拖动到b组，但是不能在a组内拖动排序。

sort属性

例子

完整代码

sortable.js sort属性例子

.box {

}

.itxst {

margin: 10px auto;

width: 40%;

float: left;

margin-right: 10px;

}

.itxst div {

padding: 6px;

background-color: #fdfdfd;

border: solid 1px #eee;

margin-bottom: 10px;

cursor: move;

}

#msg {

clear:both;

width:100%;

}

A组sort为false,往B组拖动看看

item 1

item 2

item 3

B组sort为true

www.itxst.com

google.com(不允许被拖到A组)

www.baidu.com

//第一组

var moveItemId = -1;

var g1 = document.getElementById('g1');

var ops1 = {

animation: 1000,

draggable: ".item",

//*******************************************************

//*********A组内的元素不允许排序,但是可以拖动到B组*******

//*******************************************************

sort: true,

group: 'it',

//拖动结束

onEnd: function (evt) {

console.log(evt);

//获取拖动后的排序

var arr = sortable1.toArray();

document.getElementById("msg").innerHTML = "A组排序结果：" + JSON.stringify(arr);

},

};

var sortable1 = Sortable.create(g1, ops1);

//第二组

var g2 = document.getElementById('g2');

var ops2 = {

animation: 1000,

draggable: ".item",

//*******************************************************

//********* B组内的元素允许排序,也可以拖动到A组 *******

//*******************************************************

sort: true,

group: 'it',

sort: true,

//拖动结束

onEnd: function (evt) {

console.log(evt);

//获取拖动后的排序

var arr = sortable2.toArray();

document.getElementById("msg").innerHTML ="B组排序结果："+ JSON.stringify(arr);

},

};

var sortable2 = Sortable.create(g2, ops2);