首页 > 其他分享 >layui穿梭框实现上下移动

layui穿梭框实现上下移动

时间:2023-08-08 15:14:19浏览次数:36  
标签:direction checkItem option layui length 穿梭 上下 var

layui 穿梭框上下移动功能截图


.layuiTransformBtns{
float: right;
width: 20px;
margin-top: 158px;
}

<fieldset class="table-search-fieldset2" >
<legend>体检项目</legend>
<div class="layui-card-body">
<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="transferPesiItem" class="demo-transfer"></div>
</div>
</fieldset>

// 调用
$('.videoMoveBtn').click(function () {
transfornMove({
elem: '#transferPesiItem',
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));
}
}
}

标签:direction,checkItem,option,layui,length,穿梭,上下,var
From: https://www.cnblogs.com/iamwhy/p/17614369.html

相关文章