sortable.js中文文档

sortable.js onSort 拖拽位置发生改变的事件

sortable.js onSort 拖拽位置发生改变的事件,比如有两个拖拽组a和b,你无论是a组内拖拽排序还是从a组拖往b组都会触发onSort,而onUpdate事件只会发生在a组或者b组元素被增加或者减少时才会执行。

onSort事件

属性名称类型说明
onSortfunction拖拽位置发生改变的事件
//选中回调函数,evt为参数,要查看evt对象属性请在谷歌浏览器按F12,然后再控制台(console选项卡)查看
//获取对象
var el = document.getElementById('g1');
//设置配置
var ops1 = {
    group:'itxst.com',
    animation: 1000,
    draggable: ".item",
    direction: 'vertical',
    forceFallback:true,
        //*********  拖拽“中”位置改变的回调事件 *********
    onSort: function (evt) {
            console.log(evt);
            var index=evt.oldIndex;
            var arr = sortable1.toArray();
        document.getElementById("msg1").innerHTML = "a onSort新的顺序是:" + JSON.stringify(arr);
        },
    //********* 拖拽“后”位置改变的回调事件 *********
    onUpdate: function (evt) {
            console.log(evt);
            var index=evt.oldIndex;
            var arr = sortable1.toArray();
        document.getElementById("msg2").innerHTML = "a onUpdate新的顺序是:" + JSON.stringify(arr);
        }
};
//初始化
var sortable1 = Sortable.create(el, ops1);

代码例子

evt返回参数对象结构

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>sortable.js onSort事件例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
    <style>
        .itxst {
            margin: 10px;
            width: 40%;
            float: left;
        } 
        .itxst div {
                padding: 6px;
                background-color: #fdfdfd;
                border: solid 1px #eee;
                margin-bottom: 10px;
                cursor: move;
            } 
        .msg {
            clear: both;
        }
    </style>
</head>
<body>
    <span>把a组元素往b组拖拽试试看</span>
    <div>
        <div id="g1" class="itxst">
            <div class="item" data-id="a1">item a1</div>
            <div class="item" data-id="a2">item a2</div>
            <div class="item" data-id="a3">item a3</div>
        </div>
        <div id="g2" class="itxst">
            <div class="item" data-id="b1">item b1</div>
            <div class="item" data-id="b2">item b2</div>
            <div class="item" data-id="b3">item b3</div>
        </div>
    </div>
    <div id="msg1" class="msg"></div>
    <div id="msg2" class="msg"></div>
    <script>
        //获取对象
        var el = document.getElementById('g1');
        //设置配置
        var ops1 = {
            group: 'itxst.com',
            animation: 1000,
            draggable: ".item",
            direction: 'vertical',
            forceFallback: true,
            //*********  拖拽位置发生改变的事件件 *********
            onSort: function (evt) {
                console.log(evt);
                var index = evt.oldIndex;
                var arr = sortable1.toArray();
                document.getElementById("msg1").innerHTML = "a onSort新的顺序是:" + JSON.stringify(arr);
            },
            //********* 元素被增加或者减少时才会执行的回调事件 *********
            onUpdate: function (evt) {
                console.log(evt);
                var index = evt.oldIndex;
                var arr = sortable1.toArray();
                document.getElementById("msg2").innerHTML = "a onUpdate新的顺序是:" + JSON.stringify(arr);
            }
        };
        //初始化
        var sortable1 = Sortable.create(el, ops1);


        //获取对象
        var e2 = document.getElementById('g2');
        //设置配置
        var ops2 = {
            group: 'itxst.com',
            animation: 1000,
            draggable: ".item",
            direction: 'vertical',
            forceFallback: true,
            //*********  拖拽“中”位置改变的回调事件 *********
            onSort: function (evt) {
                console.log(evt);
                var index = evt.oldIndex;
                var arr = sortable2.toArray();
                document.getElementById("msg1").innerHTML = "b onSort新的顺序是:" + JSON.stringify(arr);
            },
            //********* 拖拽“后”位置改变的回调事件 *********
            onUpdate: function (evt) {
                console.log(evt);
                var index = evt.oldIndex;
                var arr = sortable2.toArray();
                document.getElementById("msg2").innerHTML = "b onUpdate新的顺序是:" + JSON.stringify(arr);
            }
        };
        //初始化
        var sortable2 = Sortable.create(e2, ops2);
    </script>
</body>
</html>
Catalog
快速入门 常用例子 对table表格拖动排序 多组间相互拖动排序 属性列表 group 多组之间拖动 sort 是否允许组内排序 delay 延迟多久允许拖动 delayOnTouchOnly 属性 animation 动画 handle 指定拖拽句柄 filter 过滤或忽略指定元素 dataIdAttr 获取排序后数据 ghostClass 自定义停靠位置样式 draggable 指定样式 dragClass 拖拽对象移动样式 chosenClass 选中对象样式 事件列表 onChoose 选中事件 onStart 开始拖动事件 onUnchoose 取消选中事件 onEnd 拖动结束事件 onAdd 多组新增元素事件 onUpdate 位置更改事件 onSort 拖拽位置改变事件 onRemove 从组移除事件 onMove 拖拽中的事件 onClone 克隆事件 onChange 拖拽中位置改变事件