const msg = document.getElementById("msg");
//第一组
const g1 = document.getElementById("g1");
const ops = {
    animation: 1000,
    delay: 1,
    // 拖拽的元素
    draggable: ".item",
    // 选中的样式
    chosenClass: "chosen",
    //停靠位置样式
    ghostClass: 'ghost',
    forceFallback: true,
    group: { name: 'itxst.com', pull: "clone", put: true },
    // ******** 选中执行的方法 ********
    onChoose(event) {
        const index = event.oldIndex
        msg.innerHTML = `选中了第${arr1[index]}`
    },
    // ******** 拖动结束 ********
    onEnd(event) {
        console.log(JSON.stringify(arr1));
    }
}

const sortable = Sortable.create(g1, ops)
// 获取数据
const arr1 = sortable.toArray()

// 第二组
const g2 = document.getElementById("g2")
const ops2 = {
    animation: 166,
    delay: 1,
    draggable: '.item',
    //停靠位置样式
    ghostClass: 'ghost',
    //选中样式
    chosenClass: 'chosen',
    //禁用html5原生拖拽行为
    forceFallback: true,
    group: { name: 'itxst.com', pull: "clone", put: true },
    //*********** 选中后执行的方法 ***********
    onChoose: function (event) {
        const index = event.oldIndex
        msg.innerHTML = '你选中了第' + arr2[index] + '元素';
    },
    //拖动结束
    onEnd: function (event) {
        //获取拖动后的排序
        console.log(JSON.stringify(arr2));
    },
}

const sortable2 = Sortable.create(g2, ops2)
const arr2 = sortable2.toArray()