基于jquery实现左右上下移动效果


Posted in jQuery onMay 02, 2018

最近再做报表时候,直接把全部字段都导出了,但这不太灵活。回忆老师讲过的项目做报表如下左右上下移功能灵活控制,所以就尝试下咯。

基于jquery实现左右上下移动效果

js代码

function selected(thiz) 
{ 
 var name = thiz.name; 
 if(name=="right") 
  $("select[name='left']").val(""); 
 else 
  $("select[name='right']").val(""); 
} 
function Shift(thiz) 
{ 
 var right = $("select[name='right']"); 
 var left = $("select[name='left']"); 
 if(thiz=="left" && right.val() != ""){ 
  lrShift(right,left); 
 }else if(thiz=="right" && left.val() != ""){ 
  lrShift(left,right); 
 } 
 
 //获取选中的值 
} 
//从dest移动到target 
function lrShift(dest,target) 
{ 
 var childrens = dest.children(); 
 var args = ""; 
 //alert(dest.val()); 
 var dests = dest.val() 
 for(var x = 0; x < dests.length; x++) 
 { 
  var vaTemp = dests[x]; 
  target.append("<option value='"+vaTemp+"'>"+vaTemp+"</option>");//追加 
  target.find("option[value='"+vaTemp+"']").attr("selected",true);//给追加获取焦点 
  for(var y = 0; y <childrens.length;y++ )//删除选中的元素 
  { 
   if(childrens.get(y).value==vaTemp) 
    $(childrens.get(y)).remove(); 
  } 
 } 
 dest.val(""); 
} 
function ShiftValue(address) 
{ 
 var right = $("select[name='right']"); 
 var left = $("select[name='left']"); 
 if(right.val()!=null) 
  shift(right,address); 
 else if(left.val()!=null) 
  shift(left,address); 
} 
function shift(obj,address){ 
  //获取选中的值 
  var objData = obj.val(); 
  var childrens = obj.children(); 
  var strs = ""; 
  for(var x = 0; x < objData.length; x++) 
  { 
   strs+="@"+objData[x]; 
  } 
 
  //获取要添加位置对象 
  var temp = null; 
  if(address=="top"){ 
   var number = findSelect(childrens,objData[0]); 
   if((--number) < 0) 
    return; 
   temp = childrens.get(number); 
  } 
  else{ 
   var number = findSelect(childrens,objData[objData.length-1]); 
   if((++number) > childrens.length-1) 
    return; 
   temp = childrens.get(number); 
  } 
 
  //删除选中的值 
  var n = 0; 
  var buffer = new Array(childrens.length-objData.length); 
  for(var x = 0; x < childrens.length;x++) 
  { 
   var value = childrens.get(x).value; 
   if(strs.indexOf(value)==-1) 
    buffer[n++] = value; 
  } 
 
  //添加新排序的值 
  obj.empty(); 
  if(address=="top") 
  { 
   for(var y = 0; y < buffer.length;y++) 
   { 
    if(buffer[y]==temp.value) 
    { 
     for(var x = 0; x < objData.length ; x++) 
     { 
      obj.append("<option>"+objData[x]+"</option>"); 
     } 
    } 
    obj.append("<option>"+buffer[y]+"</option>"); 
   } 
  }else{ 
   for(var y = 0; y < buffer.length;y++) 
   { 
    obj.append("<option>"+buffer[y]+"</option>"); 
    if(buffer[y]==temp.value) 
    { 
     for(var x = 0; x < objData.length; x++) 
     { 
      obj.append("<option>"+objData[x]+"</option>"); 
     } 
    } 
   } 
  } 
  //选中值 
  obj.val(objData); 
} 
function findSelect(selects,objValue) 
{ 
 var number = -1; 
 for(var x = 0; x < selects.length; x++) 
 { 
  if(objValue==selects.get(x).value) 
   number = x; 
 } 
 return number; 
}

页面调用

<div> 
  <div> 
   <b>未导出字段</b> 
  </div> 
  <div style="float:left;"> 
   <select name="left" multiple="multiple" onchange="selected(this)" style="height:350px;width:200px;"> 
    <option value="姓名">姓名</option> 
    <option value="快件号">快件号</option> 
    <option value="快递公司">快递公司</option> 
    <option value="首重">首重</option> 
    <option value="续重">续重</option> 
   </select> 
  </div> 
 </div> 
 <div style="float:left;"> 
  <div style="margin:30px;margin-top:110px;">
   <input type="button" value="<<" onclick="Shift('left')"/>
  </div> 
  <div style="margin:30px;margin-top:30px;">
   <input type="button" value=">>" onclick="Shift('right')"/>
  </div> 
 </div> 
 <div style="margin-top:-20px;"> 
  <div style="margin-left:22%;"> 
   <b>需导出字段</b> 
  </div> 
  <div style="float:left;"> 
   <select name="right" multiple="multiple" onchange="selected(this)" style="height:350px;width:200px;"> 
    <option value="首价">首价</option> 
    <option value="续价">续价</option> 
    <option value="大大">大大</option> 
    <option value="小小">小小</option> 
   </select> 
  </div> 
 </div> 
 <div style="float:left;"> 
  <div style="margin:30px;margin-top:110px;">
   <input type="button" value="向上" onclick="ShiftValue('top')" />
   </div> 
  <div style="margin:30px;margin-top:30px;">
   <input type="button" value="向下" onclick="ShiftValue('bottom')" />
  </div> 
 </div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 #jQuery
You might like
JS获取父节点方法
2009/08/20 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
js实现进度条的方法
2015/02/13 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
python集合用法实例分析
2015/05/30 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
培训心得体会
2013/12/29 职场文书
铲车司机岗位职责
2014/03/15 职场文书
出纳担保书范文
2014/04/02 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
施工安全标语
2014/06/07 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android