Iview: [建议]希望Transfer能够增加上移和下移功能

Created on 5 May 2017 · 3Comments · Source: iview/iview

通常使用穿梭框时，从左侧集合中选择数据到右侧，能够同时对右侧的数据进行排序会很方便，譬如：选择列表的字段、选择需要执行的任务等

因此，希望右侧选中的数据能够上下移动调整顺序

参见
http://crlcu.github.io/multiselect/examples/move-up-down.html

Source

lvqingan

All 3 comments

自己用dragula实现了Transfer的拖拽功能，基本原理如下

通过样式名ivu-transfer-list-content查找到右侧区域，并使用dragula函数初始化
监听dragend事件，每次拖拽结束后遍历ivu-transfer-list-content-item获取新的顺序（但只能获取到label）
以新顺序遍历data来获取真正的key（但是不能将新的key直接赋值给target-keys，这样顺序就又乱了，所以只能赋值给一个新的）

<Transfer :data="data" :target-keys="targetKeys"></Transfer>

methods: {
    save() {
        let keys = this.targetKeys;

        if (_.size(this.sortTargetKeys) > 0) {
            keys = this.sortTargetKeys
        }

        // 把keys提交给服务器处理
    }  
},
mounted() {
    let targetArea = document.getElementsByClassName('ivu-transfer-list-content')[1];
    let drake = dragula([targetArea]);
    // 根据拖拽的结果重新排序
    drake.on('dragend', () => {
        let labels = []
        _.forEach(_.filter(drake.containers[0].children, el => el.className == 'ivu-transfer-list-content-item'), label => {
            labels.push(_.trim(label.innerText))
        });

        let newTargetKeys = [];
        _.forEach(labels, label => {
            newTargetKeys.push(_.find(this.data, {label: label}).key)
        })

        this.sortTargetKeys = newTargetKeys;
    })
}

lvqingan on 5 May 2017

Transfer 的场景并非是做排序。