sortable.js delay属性鼠标按下后多久才允许拖动,比如你拖拽的元素还包含其他事件如编辑删除事件,如果不设置该属性虽然可以执行删除事件,但是该元素会被轻微的被拖动一下,用户体验非常不好。
例子
<div class="box">
<div id="g1" class="itxst">
<div>点击按住鼠标1秒后再拖动</div>
<div class="item" data-id="1" onclick="del()">item 1</div>
<div class="item" data-id="2" onclick="del()">item 2</div>
<div class="item" data-id="3" onclick="del()">item 3</div>
</div>
</div>
<div id="msg"></div>
//第一组
var g1 = document.getElementById('g1');
var ops1 = {
animation: 1000,
draggable: ".item",
delay: 1000,
//拖动结束
onEnd: function (evt) {
console.log(evt);
//获取拖动后的排序
var arr = sortable1.toArray();
document.getElementById("msg").innerHTML = "A组排序结果:" + JSON.stringify(arr);
},
};
function del() {
alert("执行了del事件")
}
var sortable1 = Sortable.create(g1, ops1);