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);
        })