js上下移动排序

最新推荐文章于 2019-07-13 16:05:57 发布
最新推荐文章于 2019-07-13 16:05:57 发布
阅读量493 收藏
点赞数
文章标签： javascript php ViewUI
原文链接：https://yq.aliyun.com/articles/542563
版权

 

 
 
  1. <?php 
  2.     if($_POST){ 
  3.         $arr_paixu=$_POST['paixu']; 
  4.         $arr_name=$_POST['name']; 
  5.         print_r($arr_paixu); 
  6.         echo '<br />'; 
  7.         print_r($arr_name); 
  8.         echo '<br />'; 
  9.          
  10.         $new_arr=array_combine($arr_paixu,$arr_name);   //数组对应合并 
  11.         print_r($new_arr); 
  12.     } 
  13. ?> 
  14. <html> 
  15. <head> 
  16. <meta http-equiv="content-type" content="text/html;charset=gbk"> 
  17. <script language="javascript"> 
  18. <!-- 
  19. function onclick_updown(updown, order){ 
  20.     var o_order, n_order; 
  21.     o_order = order; 
  22.     o_innerHTML = document.getElementById("name_" + o_order).value; 
  23.     if (updown == "down"){ 
  24.         n_order = order + 1; 
  25.     } 
  26.     else{ 
  27.         n_order = order - 1; 
  28.     } 
  29.     n_innerHTML = document.getElementById("name_" + n_order).value; 
  30.     document.getElementById("name_" + o_order).value = n_innerHTML; 
  31.     document.getElementById("name_" + n_order).value = o_innerHTML; 
  32. } 
  33. //--> 
  34. </script> 
  35. </head> 
  36. <body> 
  37. <form action="" method="post"> 
  38.     <input type="text" name="paixu[]" value="1" /><input type="text" name="name[]" id="name_1" value="第一个" /><a href="#" onclick="onclick_updown('down', 1)">下移</a><br /> 
  39.     <input type="text" name="paixu[]" value="2" /><input type="text" name="name[]" id="name_2" value="第二个" /><a href="#" onclick="onclick_updown('up', 2)">上移</a><a href="#" onclick="onclick_updown('down', 2)">下移</a><br /> 
  40.     <input type="text" name="paixu[]" value="3" /><input type="text" name="name[]" id="name_3" value="第三个" /><a href="#" onclick="onclick_updown('up', 3)">上移</a><a href="#" onclick="onclick_updown('down', 3)">下移</a><br /> 
  41.     <input type="text" name="paixu[]" value="4" /><input type="text" name="name[]" id="name_4" value="第四个" /><a href="#" onclick="onclick_updown('up', 4)">上移</a><br /> 
  42.     <br /><br /> 
  43.     <input type="submit" value="提交" /> 
  44. </form> 
  45. </body> 
  46. </html> 
 
 
 
 
 

 
 

 
 

 
 
      本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/957387，如需转载请自行联系原作者
 
 
 
  
 
 
 


                

        

        




    




    

      

        

            

              
                
                  weixin_33725722
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
js 实现列表的上下排序功能

				
			

			

				

					weixin_45786785的博客
				

				

					12-16
					
					663
					
				

			

		

		

			
				
首先 先编写2个div 

未排序办件列表：



序号
文件标题
操作



NUMBER
SUP_TITLE
移动到右边







上移
下移



已排序办件列表：



操作
文件标题
序号



移动到左边
SUP_TITLE
NUMBER







...

			
		

	



                

              
                



	

		

			

				
					
JS实现图片拖拽排序（亲测可用）

				
			

			

				

					03-07
				

			

		

		

			
				
前端用于鼠标拖拽排序，亲测可用，如果需要动态加载数据，请设置延迟加载

			
		

	



                


  
              

                


	

		

			

				
					
js上下点击排序

				
			

			

				

					06-12
				

			

		

		

			
				
js上下点击排序

			
		

	





	

		

			

				
					
JQUERY JS实现select上移下移自定义排序

				
			

			

				

					小昭笑笑的CSDN博客
				

				

					10-27
					
					2630
					
				

			

		

		

			
				
/****自定义排序***By 秦迷*/$=function(o){return typeof(o)=="string"?document.getElementById(o):o}; function up(orderStr){ var nowIndex=$(orderStr).selectedIndex; if (nowIndex==-1){  alert("请先选择要移动的项!");  ret

			
		

	



		

			
		



	

		

			

				
					
Vue实现table上下移动功能示例

				
			

			

				

					10-17
				

			

		

		

			
				
主要介绍了Vue实现table上下移动功能,结合实例形式分析了vue.js针对table表格元素动态操作相关实现技巧,需要的朋友可以参考下

			
		

	





	

		

			

				
					
select框上下移动排序

				
			

			

				

					06-23
				

			

		

		

			
				
当需要对这些选项进行动态排序，比如允许用户通过上下移动来调整选项的顺序时，就需要用到“select框上下移动排序”的技术。这个功能在很多应用场景中都很常见，比如任务管理、优先级设置等，它可以提升用户的交互...

			
		

	





	

		

			

				
					
Vue实现点击箭头上下移动效果

				
			

			

				

					10-15
				

			

		

		

			
				
在Vue.js中，实现点击箭头上下移动的效果通常涉及到数据绑定、事件监听和数组操作。以下将详细解析这个示例中的关键知识点。  1. **数据绑定 (`v-for`)**:  在HTML模板中，`v-for`指令用于遍历数组，并为每个元素...

			
		

	





	

		

			

				
					
移动端列表长按上下拖动排序

				
			

			

				

					10-31
				

			

		

		

			
				
在实际开发中，我们可以使用JavaScript库，如Hammer.js，来简化触摸事件的处理，同时结合CSS3的transform属性来实现平滑的动画效果。此外，为了优化性能，可能需要使用虚拟列表（Virtual Scrolling）技术，只渲染...

			
		

	





	

		

			

				
					
移动端列表长按上下拖动排序（新）

				
			

			

				

					04-12
				

			

		

		

			
				
在长按上下拖动排序的实现中，我们需要监听`touchstart`来识别长按行为，然后在`touchmove`事件中计算手指移动的距离，以此来更新列表项的位置。最后，`touchend`事件可以用来确认排序操作并更新列表的内部状态。  ...

			
		

	





	

		

			

				
					
js 实现 改变列表项的上下顺序

				
			

			

				

					03-31
				

			

		

		

			
				
js 实现 改变列表项的上下顺序!
值得下载看看!资源免费,大家分享!!

			
		

	





	

		

			

				
					
移动端和pc端拖动排序

				
			

			

				

					07-24
				

			

		

		

			
				
移动端和pc端列表点击住按钮，然后可以上下拖动进行排序，主要使用了基于drag-arrange.js插件，然后使用了touch相关事件实现，支持移动端和pc端。

			
		

	





	

		

			

				
					
JQ JS javascript layui UI组件 元素 div 拖动插件

				
			

			

				

					04-18
				

			

		

		

			
				
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件

			
		

	





	

		

			

				
					
JS进度条，实现同步增长效果

				
			

			

				

					06-24
				

			

		

		

			
				
JS进度条，实现同步增长效果，我觉得很好用，大家可以下载下来试试。

			
		

	





	

		

			

				
					
长按拖动排序

				
			

			

				

					01-26
				

			

		

		

			
				
/*
 * 使用方法
 **/
//- (void)viewDidLoad {
//    [super viewDidLoad];
//    // Do any additional setup after loading the view.
//    self.view.backgroundColor = [UIColor grayColor];
//    
//    StBtnTouchMove *stBtn = [[StBtnTouchMove alloc]initWithFrame:CGRectMake(0, 200, 375, 100)];
//    [self.view addSubview:stBtn];
//    stBtn.buttonArray = [[NSMutableArray alloc]init];
//    for (NSInteger i = 0; i < 4; i++) {
//        UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(i*375/4.0, 0, 375/4.0, 100)];
//        [stBtn addSubview:btn];
//        [btn setTitle:[NSString stringWithFormat:@"btn%ld",i] forState:UIControlStateNormal];
//        btn.backgroundColor = [UIColor redColor];
//        [stBtn.buttonArray addObject:btn];
//        [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
//    }
//    [stBtn touchMove];
//}

			
		

	





	

		

			

				
					
js上移、下移排序 效果

				
			

			

				

					weixin_34348805的博客
				

				

					04-22
					
					164
					
				

			

		

		

			
				
<script type="text/javascript"><!--
google_ad_client = "pub-0849827290095392";
/* 728x90, 创建于 09-3-19 */
google_ad_slot = "6829013231";
google_ad_width = 728;
google_ad_height = 90;
/...

			
		

	





	

		

			

				
					
js实现数组元素上下移动

					
热门推荐

				
			

			

				

					良_123的专栏
				

				

					12-14
					
					1万+
					
				

			

		

		

			
				
交换数组可以实现元素上下移动了，这个效果我们在表格或以前排序算法中都会用到，下面来看一个JavaScript下实现交换数组元素上下移动例子



在写项目的时候，要实现一个数组记录上下移动的示例。写起来也没有没麻烦，无非是交换数组元素。最终实现代码如

下，比较重要的是那个函数。

// 交换数组元素
    var swapItems = function(arr, index

			
		

	





	

		

			

				
					
Jquery之实现上下移动和排序

				
			

			

				

					阿毅
				

				

					05-06
					
					5397
					
				

			

		

		

			
				
开心一笑一哥们在漳州呆腻了，就到法国去度度假散散心 
刚到巴黎第一天上街，见很多人在买彩票抽奖，有人抽中三等奖LV包，有人抽中二等奖劳力士金表…… 
这哥们看了看，也上去想碰碰运气，掏钱就买了一张。打开一看，众人立即欢呼，一等大奖出现了! 
哥们欢呼雀跃，真是幸运！ 
工作人员上前告诉他：先生恭喜你，准备好行李，明天出发，一等奖是去中国漳州南山寺、南靖土楼5曰游！…….[偷笑][偷笑]提出问题Jqu

			
		

	





	

		

			

				
					
(javascript)调整记录的顺序并保存序号

				
			

			

				

					weixin_30607029的博客
				

				

					07-13
					
					649
					
				

			

		

		

			
				
做项目碰到一个问题，需要动态的调整记录的排列顺序，并更新数据库相应的序号字段。开始并没考虑使用javascript来做，因为感觉自己对于js还是比较弱，没胆量用js来做，于是开始的时候是用的调整顺序的时候提交数据库改变序号来做，我也知道如果这样对于用户体验是个很不好的效果，但是先把这个能跑起来再说，很快这个就弄完了，我也开始思考如何将这个改为js来做，翻看了网上很多资料，终于给我找到...

			
		

	





	

		

			

				
					
select下拉上下移动排序

					
最新发布

				
			

			

				

					05-27
				

			

		

		

			
				
您可以使用JavaScript来实现select下拉选项的上下移动排序。以下是一个简单的实现示例：

```html
<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
</select>

<button onclick="moveUp()">Move Up</button>
<button onclick="moveDown()">Move Down</button>

<script>
  function moveUp() {
    var select = document.getElementById("mySelect");
    var selectedOption = select.options[select.selectedIndex];
    if (selectedOption.previousElementSibling) {
      select.insertBefore(selectedOption, selectedOption.previousElementSibling);
    }
  }

  function moveDown() {
    var select = document.getElementById("mySelect");
    var selectedOption = select.options[select.selectedIndex];
    if (selectedOption.nextElementSibling) {
      select.insertBefore(selectedOption.nextElementSibling, selectedOption);
    }
  }
</script>
```

在这个实现中，我们创建了一个select元素和两个按钮，分别用来向上和向下移动当前选中的选项。在JavaScript中，我们定义了两个函数moveUp和moveDown。这些函数使用DOM API来获取当前选中的选项以及其前一个或后一个兄弟元素，并使用insertBefore方法来重新排列选项的顺序。

在您的应用程序中，您可以根据需要修改此示例来适应您的特定要求。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值