sortable.js中文文档

sortable.js 多组间相互拖动排序

sortable.js 多组拖动排序,从a组拖动元素到b组或从a组克隆元素到b组。group是多组之间相互拖拽最重要的属性,下面为group属性的说明。
 //设置方式一
group:'itxst'
//设置方式而
group:{
    name:'itxst',//组名为itxst
    pull:true|false|function,//是否允许拖入当前组
    put:true|false|function,//是否允许拖出当前组
}

从A组拖动元素到B组

例子,注意一定要设置组的最小高度"min-height:120px",这样空组时才可以拖入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>sortable.js 多组拖动排序例子</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>
        .box {
        } 
        .itxst {
            margin: 10px auto;
            width: 30%;
            float: left;
            margin-right: 10px;
            min-height:120px
        }
        .itxst div {
                padding: 6px;
                background-color: #fdfdfd;
                border: solid 1px #eee;
                margin-bottom: 10px;
                cursor: move;
            }
        #msg {
        clear:both;
        width:100%;
        }
    </style>
</head>
<body> 
<div class="box">
    <div id="g1" class="itxst">
        <div>A组</div>
        <div class="item" data-id="1">item 1</div>
        <div class="item" data-id="2">item 2</div>
        <div class="item" data-id="3">item 3</div>
    </div>
    <div id="g2" class="itxst">
        <div>B组</div>
        <div class="item" data-id="4">www.itxst.com</div>
        <div class="item" data-id="5">www.google.com</div>
        <div class="item" data-id="6">www.baidu.com</div>
    </div>
    <div id="g3"  class="itxst">
        <div>C组</div>
        <div class="item" data-id="7">杭州</div>
        <div class="item" data-id="8">山景城</div>
        <div class="item" data-id="9">北京</div>
    </div>
</div>
<div id="msg"></div>
<script>
    //第一组
    var g1 = document.getElementById('g1');
    var ops1 = {
        animation: 1000,
        draggable: ".item",
        group: { name: "itxst.com", pull: true, put: true },
        //拖动结束
        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",
        group: { name: "itxst.com", pull: true, put: 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);
    //第三组
    var g3 = document.getElementById('g3');
    var ops3 = {
        animation: 1000,
        draggable: ".item",
        //拖动结束
        onEnd: function (evt) {
            console.log(evt);
            //获取拖动后的排序
            var arr = sortable3.toArray();
            document.getElementById("msg").innerHTML = "C组排序结果:" + JSON.stringify(arr);
        },
    };
    var sortable3 = Sortable.create(g3, ops3);
</script>
</body>
</html>

拖拽时从A组克隆到B组

拖拽时从A组克隆到B组,B组不允许拖入A组

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>sortable.js 拖拽时从A组克隆到B组例子</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>
        .box {
        } 
        .itxst {
            margin: 10px auto;
            width: 30%;
            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%;
        }
    </style>
</head>
<body> 
<div class="box">
    <div id="g1" class="itxst">
        <div>A组</div>
        <div class="item" data-id="1">item 1</div>
        <div class="item" data-id="2">item 2</div>
        <div class="item" data-id="3">item 3</div>
    </div>
    <div id="g2" class="itxst">
        <div>B组</div>
        <div class="item" data-id="4">www.itxst.com</div>
        <div class="item" data-id="5">www.google.com</div>
        <div class="item" data-id="6">www.baidu.com</div>
    </div>
    <div id="g3"  class="itxst">
        <div>C组</div>
        <div class="item" data-id="7">杭州</div>
        <div class="item" data-id="8">山景城</div>
        <div class="item" data-id="9">北京</div>
    </div>
</div>
<div id="msg"></div>
<script>
    //第一组
    var g1 = document.getElementById('g1');
    var ops1 = {
        animation: 1000,
        draggable: ".item",
        group: { name: "itxst.com", pull: 'clone', put: false },
        //拖动结束
        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",
        group: { name: "itxst.com", pull: true, put: 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);
    //第三组
    var g3 = document.getElementById('g3');
    var ops3 = {
        animation: 1000,
        draggable: ".item",
        //拖动结束
        onEnd: function (evt) {
            console.log(evt);
            //获取拖动后的排序
            var arr = sortable3.toArray();
            document.getElementById("msg").innerHTML = "C组排序结果:" + JSON.stringify(arr);
        },
    };
    var sortable3 = Sortable.create(g3, ops3);
</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 拖拽中位置改变事件