Layui transfer组件默认不支持双击移动,需在done回调中对左侧可选项li绑定dblclick事件,先调用setChecked模拟勾选,再触发移入按钮点击,确保兼容性和状态一致性。
transfer 组件默认不支持双击移动,需手动绑定事件
layui 的 transfer 组件原生只提供拖拽、按钮点击两种转移方式,dblclick 事件未被内置监听。要实现「双击左侧选项自动移入右侧」,必须在渲染后对左侧列表的 .layui-transfer-box .layui-transfer-search + .layui-transfer-box-body 内的 li 元素手动绑定双击逻辑。
注意:不能直接在 transfer.render() 配置里加 onDblClick —— 这个参数根本不存在,Layui 官方文档也未暴露该钩子。
如何安全绑定双击事件而不破坏组件内部状态
关键在于等 transfer 渲染完成后再操作 DOM,并确保只作用于左侧(index === 0)的可选项。否则可能误触右侧已选中项,或在异步加载数据时绑定失败。
- 用
transfer.render()的done回调(或延时setTimeout)确保 DOM 已就绪 - 只给左侧盒子(
.layui-transfer-box:eq(0))内的li.layui-transfer-active绑定,避免影响搜索框、空提示等非选项节点 - 每次双击前先调用
transfer.setChecked()模拟勾选,再触发「向右移动」按钮的点击行为(最稳妥,兼容 Layui 2.8.x 所有小版本) - 不要直接操作
data数组或重赋值value,否则会导致右侧已选项丢失、全选状态错乱
完整可运行代码片段(含防重复绑定)
layui.use(['transfer', 'jquery'], function(){
var transfer = layui.transfer;
var $ = layui.jquery;
// 初始化穿梭框
var ins = transfer.render({
elem: '#test',
data: [
{value: '1', title: '选项一'},
{value: '2', title: '选项二'},
{value: '3', title: '选项三'}
],
showSearch: true,
height: 300,
done: function(data){
// 渲染完成后绑定双击(仅一次)
bindDblClickToTransfer(ins);
}
});
function bindDblClickToTransfer(ins){
// 防止多次调用重复绑定
if ($('.layui-transfer-box:eq(0)').data('dblBound')) return;
$('.layui-transfer-box:eq(0)')
.on('dblclick', 'li.layui-transfer-active', function(){
var $this = $(this);
var value = $this.data('value');
// 先模拟勾选
transfer.setChecked(ins.config.id, [value]);
// 触发「移入右边」按钮点击(对应按钮索引为 0)
$('.layui-transfer-btns button').eq(0).trigger('click');
})
.data('dblBound', true);
}
});
容易被忽略的边界问题
双击生效的前提是左侧选项处于「可交互状态」:如果启用了 disabled 或数据为空(显示「暂无数据」),绑定会失效;搜索过滤后,新生成的 li 是动态插入的,需用事件委托(上面代码已用 on 而非 click 解决);Layui 2.7+ 版本中,transfer 在 done 回调里 DOM 可能尚未完全挂载,保险起见可加 setTimeout(..., 10) 延迟执行绑定。
真实项目里,若左侧数据量大(>500 条),双击响应会有轻微延迟——这不是 bug,而是 Layui 内部重绘开销所致,此时建议改用键盘快捷键(如回车)替代双击,体验更稳定。











