基于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 Tree Multiselect使用详解
May 02 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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
很好用的PHP数据库类
2009/05/27 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
python生成lmdb格式的文件实例
2018/11/08 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
Django视图类型总结
2021/02/17 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
百年校庆节目主持词
2014/03/27 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
学习心得体会
2019/06/20 职场文书
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers