layui.transfer 实现穿梭框选择完后，可鼠标拖动调整选中后的列表顺序
在Layui中，使用transfer组件可以实现两个列表之间的选择，并且可以通过配置drag属性来启用拖动功能，从而允许用户在选择后调整列表项的顺序。
以下是一个简单的实例代码，展示了如何使用Layui的transfer组件实现带有拖动调整功能的选择框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui Transfer Drag Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css" media="all">
</head>
<body>
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">选择项:</label>
<div class="layui-input-block">
<input type="hidden" id="transfer-result" name="transfer-result">
<div id="transfer-box"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
layui.use(function(){
var transfer = layui.transfer;
transfer.render({
elem: '#transfer-box',
data: [ // 数据格式为数组
{value: '1', title: '选项1'},
{value: '2', title: '选项2'},
{value: '3', title: '选项3'},
{value: '4', title: '选项4'},
{value: '5', title: '选项5'},
{value: '6', title: '选项6'}
],
value: ['2', '5'], // 初始选中值
theme: 'success', // 主题
drag: true // 开启拖动功能
});
// 监听选中项变化
transfer.on('change', function(obj){
console.log(obj.value); // 当前选中的值
document.getElementById('transfer-result').value = obj.value.join(',');
});
});
</script>
</body>
</html>在这个例子中，transfer.render方法用来初始化穿梭框，并通过data属性设置可供选择的项。value属性用来设置初始选中的项。drag属性设置为true启用拖动功能，允许用户拖动已选择的项来重新排列它们。transfer.on('change', function(obj){...})用来监听选中项的变化，并可以实现将最终选中的值赋给一个隐藏字段，供后续处理或提交。
评论已关闭