layui穿梭框右侧增加上移下移功能

穿梭框显示

//div 页面显示
<div id="div_step_task" class="nlook layui-form" style="height: 440px; overflow-x: hidden; padding: 0">
        <div class="nlook-top">
            <p class="nlook-topl"><img src="/Content/images/dm-a.png" alt="">编辑流程步骤</p>
        </div>
        <div class="layuiTransformBtns" style="">
            <button type="button" data-direction="up" class="layui-btn layui-btn-sm videoMoveBtn" style="margin-bottom: 15px;"><i class="layui-icon layui-icon-up"></i></button><br>
            <button type="button" data-direction="down" id="moveDown" class="layui-btn layui-btn-sm videoMoveBtn"><i class="layui-icon layui-icon-down"></i></button>
        </div>
        <div id="transfer_step_task" class="demo-transfer" style="margin-top: 5px;margin-left: 30px; "></div>
        <input id="inputTest" type="hidden" value="" />
        @*<button type="button" id="getRightData" class="layui-btn layui-btn-sm">取数据</button>*@
        @*<div class="layui-form-mid layui-word-aux">数据显示在控制台</div>*@
    </div>

 

//渲染 穿梭框
  var valueArray = [];  // 右侧默认数据

        layui.transfer.render({
            elem: '#transfer_step_task'
            , title: ['可选任务', '选中任务']
            , data: res
            , parseData: function (res) {
                if (res.LAY_CHECKED == true) {
                    valueArray.push(res.SERVICE_TASK_ID)
                }
                return {
                    "value": res.SERVICE_TASK_ID //数据值
                    , "title": res.SERVICE_TASK_NAME //数据标题
                    , "checked": res.LAY_CHECKED //是否选中
                }
            }
            , value: valueArray
            , id: 'demo1'
        })

 

// 调用
 $('.videoMoveBtn').click(function () {
            transfornMove({
                elem: '#div_step_task',
                direction: $(this).data('direction')
            })
        })

 

    //layui穿梭框上移、下移功能
    function transfornMove(option) {
         //debugger
        //右侧穿梭框
        var rightTransforn = $($(option.elem + " ul")[1])
        // 穿梭框选中的元素
        var checkItem = rightTransforn.find('.layui-form-checked').parent()
        // 穿梭框右侧下面部分
        var rightTransBottom = rightTransforn.children()
        // 第一个元素的下标
        var checkOneIndex = rightTransBottom.index(option.direction == 'down' ? checkItem[checkItem.length - 1] : checkItem[0])
        // 右侧有几条数据
        var rightDataLength = rightTransBottom.length
        //console.log('右侧共有', rightDataLength, '条数据');
        //console.log('当前选择的元素', checkItem);
        //console.log('第一个元素的下标', checkOneIndex);
        //console.log('当前元素在父元素的位置', rightTransBottom.index(checkItem));
        if (!checkItem.length) {
            layer.msg("请选择数据后再操作");
            return;
        }
        // 上移时，取第一个元素在父元素的位置，如果在第一位就不再移动
        if (checkOneIndex == (option.direction == 'down' ? rightDataLength - 1 : 0)) {
            layer.msg("已是首位");
            return;
        }
        if (option.direction == 'down') {
            for (var i = checkItem.length; i >= 0; i--) {
                checkItem.eq(i).next().after(checkItem.eq(i));
            }
        } else {
            for (var i = 0; i < checkItem.length; i++) {
                checkItem.eq(i).prev().before(checkItem.eq(i));
            }
        }
    }

 

  //获取右侧框中的ul li 元素数据拼接成数组对象
        var getDataLi = $("#transfer_step_task ul")[1];
        var getInputData = [];
        
        $(getDataLi).find('li').each(function (index, value) {
            var inputObject = {};
            inputObject.value = $(value).find('input').val();
            inputObject.title = $(value).find('input').attr('title');
            getInputData.push(inputObject);
        })