
实现代码如下:
//取消选中排序的行
$(‘#checkout’).live(‘click’,function(e){
if(!$(e.target).parent().hasClass(‘goods_row’)){
$(‘#checkout tr’).removeClass(‘select-tr’);
}
});
//排序,选择要移动的对象
$(‘#checkout .goods_row’).live(‘click’,function(e){
if(!$(e.target).hasClass(‘goods_row’) && !$(e.target).hasClass(‘goods_number’)){
var self = $(this);
if(self.attr(‘merge_check’))
{//套装销售
$(‘#checkout tr’).not($(‘.’+self.attr(‘merge_check’))).removeClass(‘select-tr’);
$(‘.’+self.attr(‘merge_check’)).toggleClass(‘select-tr’);
}else
{//单品销售
$(‘#checkout tr’).not(self).removeClass(‘select-tr’);
self.toggleClass(‘select-tr’);
}
}
});
//交换顺序
$(document).keydown(function(e){
if($(‘.select-tr’).length>0 && !$(e.target).hasClass(‘goods_number’)){
var key = (e.keyCode) || (e.which) || (e.charCode);//兼容IE(e.keyCode)和Firefox(e.which)
if(key==38){//向上
var prev = $(‘.select-tr:first’).prev();
// 如果上一行含有类名goods_row,则可以向上移动,否则便是原有的商品,不能够向上移动
if(prev.attr(‘merge_check’)){
$(‘.select-tr’).insertBefore($(‘.’+prev.attr(‘merge_check’)+’:first’));
}else{
$(‘.select-tr’).insertBefore(prev);
}
$(“.select-tr .change_goods_number”).focus();
$(“.select-tr .change_goods_number”).blur();
return false;
}else if(key==40){//向下
var next = $(‘.select-tr:last’).next();
if(next.attr(‘merge_check’)){
$(‘.select-tr’).insertAfter($(‘.’+next.attr(‘merge_check’)+’:last’));
}else{
$(‘.select-tr’).insertAfter(next);
}
$(“.select-tr .change_goods_number”).focus();
$(“.select-tr .change_goods_number”).blur();
return false;
}
}
});
最初发现在firefox、chrome、IE7/8等浏览器下全部运行正常,而在IE9/10下,必须新开标签页才能够运行正常,而不能够直接嵌入iframe中运行,原因在于好像执行了一次insertAfter之后,其焦点已经不在iframe中了,对于keydown(键盘事件)再无响应,为了解决此问题,便决定在iframe中某一元素上实现focus(),结果却发现.select-tr本身及其父元素已经不支持focus()了,如果采用.select-tr的最顶层父元素的上一个元素倒是可以的,但是却会出现滚动条一直在顶部的情况,最后想出的解决方法如下:
$(“.select-tr .change_goods_number”).focus();
$(“.select-tr .change_goods_number”).blur();
因为发现虽然.select-tr本身及其父元素已经不支持focus()了,但是其中的类型为input还是支持focus()的!
需要长期技术维护或远程问题排查?
我是拥有 15+ 年经验的 PHP / Go 后端工程师,长期关注已有系统维护、Bug 修复、性能优化、服务器排查、WordPress 网站维护和小功能迭代。
如果你的项目遇到以下情况,可以先从一次小问题排查开始合作:
- ✅ PHP / Laravel / Yii2 老项目无人维护
- ✅ Go / Gin 后端接口需要排查或优化
- ✅ WordPress 网站访问慢、报错或插件冲突
- ✅ Nginx / MySQL / Redis / Linux 服务器异常
- ✅ CDN / Cloudflare / DNS / HTTPS 配置问题
- ✅ 需要长期远程技术支持或兼职维护
更多介绍请查看:关于我 & 合作
微信:13980074657
邮箱:shuijingwanwq@gmail.com
Telegram:@shuijingwan
GitHub:https://github.com/shuijingwan


发表回复