js 中移动元素的方法

最新推荐文章于 2024-07-12 12:03:01 发布
最新推荐文章于 2024-07-12 12:03:01 发布
阅读量272 收藏
点赞数
原文链接：http://www.cnblogs.com/laoguiaabb/p/8034386.html
版权 
 
  
 
   
2017-12-13 19:59:24
 
  
 
  
 
  
 
 
  
 1
 
  
 
   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <select multiple="multiple" size="8" id="left_box">
        <option>水果</option>
        <option>橘子</option>
        <option>苹果</option>
        <option>香蕉</option>
        <option>梨子</option>
        <option>凤梨</option>
        <option>桃子</option>
        <option>樱桃</option>
    </select>

    <select multiple="multiple" size="8" id="right_box">
        <option>购物车</option>
    </select>

    <input id="to_right" οnclick="to_right()" value="添加" type="button">
    <input id="to_left" οnclick="to_left()" value="取消" type="button">
    <script>
        var box_r=document.getElementById("right_box");  // 找到右边盒子对象
        var box_l=document.getElementById("left_box");   // 找到左边盒子对象
        var options=box_l.getElementsByTagName("option"); //找到左盒子下的所有option数组  （1）
        function to_right() {                            // 移动到右边盒子方法

            for (var i=0;i<options.length;i++){
                var op=options[i];
                if(op.selected==true){                           //option有个属性，如果选中就自动加入了selected属性 所以通过这个逻辑来找出选中的option
                    box_r.appendChild(op);                       //appendChild方法不光是创建元素,还可以移动元素
                    i--;
                }
            }
        }
        function to_left() {                                   //移动到左边盒子的方法
            var options=document.getElementById("right_box").getElementsByTagName("option"); //（2）
            for (i in options){                                              
                var op=options[i];
                if(op.selected==true){                       
                    box_l.appendChild(op);
                }
            }
        }
    </script>
</body>
</html>

 
  
 
  
　　
 
  
注：代码里用了2种循环的写法，效果略有不同。标记的2处的options其实用左边盒子和右边效果一样。
 
 
 

 

转载于:https://www.cnblogs.com/laoguiaabb/p/8034386.html

                

        

        




    

  


    

      

        

            

              
                
                  weixin_30414305
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
javascript实现元素的移动

				
			

			

				

					Sean's Technology Blog
				

				

					09-05
					
					2797
					
				

			

		

		

			
				
var $ = function(id) { return document.getElementById(id); }
            var Images = function()
            {
            	this.imgs = null

			
		

	



                

              
                



	

		

			

				
					
js 控制移动

				
			

			

				

					cyh
				

				

					06-04
					
					604
					
				

			

		

		

			
				
主要用到定时器setInterval(定时执行的函数, 时间)
clearInterval(定时器对象) 关闭一个定时器

对象.offsetLeft 当前距离父元素的左边距




无标题文档

#div{
	background:#0F0;
	width:200px;
	height:200px;
	position:absolute;
	top:50px;
	left:0px;
}


			
		

	



                


  
              

                


	

		

			

				
					
js 移动数组元素的几个方法

					
最新发布

				
			

			

				

					Misnice的博客
				

				

					07-12
					
					300
					
				

			

		

		

			
				
js 移动数组元素的几个方法

			
		

	





	

		

			

				
					
js怎样添加、移除、移动、复制、创建和查找节点

				
			

			

				

					IT1125275074的博客
				

				

					03-10
					
					599
					
				

			

		

		

			
				
（1）创建新节点

var para=document.createElement("p"); //创建新的 <p> 元素
var node=document.createTextNode("这是新段落。"); //创建了一个文本节点
para.appendChild(node); //向 <p> 元素追加这个文本节点

var element...

			
		

	



		

			
		



	

		

			

				
					
js移动和拖拽

				
			

			

				

					飞驰的地铁
				

				

					07-05
					
					447
					
				

			

		

		

			
				
移动

绝对定位法
onmousedown：鼠标按键按下事件。
获取鼠标位置，获取被拖拽元素的位置，记录两者之间的纵横坐标的差值(clientX和offsetX差值)。
onmousemove：模拟拖拽中事件。
鼠标拖动即发生  onmousemove  事件。对容器元素绑定 。将被拖拽元素的  position  改成绝对位置，这个可以通过  left  和  top  改变该元素的位置，从而使...

			
		

	





	

		

			

				
					
一个简单的JS（盒子移动）

				
			

			

				

					qq_47997447的博客
				

				

					10-16
					
					1281
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #content {
      /*要定位，不然left不起作用。*/
      /*position: absolu.

			
		

	





	

		

			

				
					
Javascript实现数组中的元素上下移动

				
			

			

				

					10-19
				

			

		

		

			
				
在JavaScript中，`splice()` 方法是一个非常实用的数组操作方法，它可以用来添加、删除或替换数组的元素。当`splice()` 方法的第一个参数是索引，第二个参数为0（表示删除0个元素），第三个参数是新的值时，它会将...

			
		

	





	

		

			

				
					
原生javascript实现获取指定元素下所有后代元素的方法

				
			

			

				

					10-25
				

			

		

		

			
				
在原生JavaScript中，`getElementsByTagName()` 方法是最常用的用于获取元素后代的方法之一。该方法属于`Element`对象，可以用来获取当前元素及其后代中所有匹配指定标签名的元素。该方法返回一个包含所有匹配标签名...

			
		

	





	

		

			

				
					
【JavaScript源代码】利用JS定时器实现元素移动.docx

				
			

			

				

					12-30
				

			

		

		

			
				
本文将详细介绍如何使用JavaScript中的定时器来实现元素的平滑移动，并探讨一些进阶技巧。  #### 二、核心知识点解析  ##### 1. 定时器基础 - **setInterval()**: JavaScript中的`setInterval()`函数用于周期性地...

			
		

	





	

		

			

				
					
JavaScript如何实现组合列表框中元素移动效果

				
			

			

				

					11-22
				

			

		

		

			
				
应用背景：在页面中有两个列表框，需要把其中一个列表框的元素移动到另一个列表框 。  　实现的基本思想：  　（1）编写init方法对两个列表框进行初始化；  　（2）为body添加onload事件调用init方法；  　（3）编写...

			
		

	





	

		

			

				
					
JS 简单的实现移动选中元素

				
			

			

				

					烂笔头NI
				

				

					08-13
					
					1509
					
				

			

		

		

			
				
JS 简单的实现移动选中元素实现效果如图： 
 
实现代码如下：<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function one_right(){
            var l_table=document.getEle

			
		

	





	

		

			

				
					
JS实现元素上下左右移动效果

				
			

			

				

					11-26
				

			

		

		

			
				
本文实例为大家分享了JS实现元素上下左右移动的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  a {
   cursor: pointer;
  }
  #cell {
   width: 30px;
   height: 30px;
   background: red;
   position: relative;
   left: 0;
   top: 0;
  }
 </style>
</head>

			
		

	





	

		

			

				
					
js实现节点可拖动的树

				
			

			

				

					05-31
				

			

		

		

			
				
js实现节点可拖动的树!
值得下载看看!资源免费,大家分享!! 
更多免费资源 http://ynsky.download.csdn.net/

			
		

	





	

		

			

				
					
前端js控制元素移动

				
			

			

				

					qq_45840993的博客
				

				

					04-18
					
					554
					
				

			

		

		

			
				
不使用定时器js控制元素从右至左匀速滚动，直至内部元素滚动出可视范围

			
		

	





	

		

			

				
					
JS常用的节点操作和方法

				
			

			

				

					weixin_44212397的博客
				

				

					01-30
					
					1058
					
				

			

		

		

			
				
Node>Document>documentElement>body>tagname
1.创建节点
我们常用的节点类型：
元素节点(标签)
属性节点(标签里的属性)
文本节点（文本节点）
createElement()	创建元素节点。
appendChild()	把新的子节点添加到指定节点。
insertBefore(新的子节点,指定的子节点)	在指定的子节点前面插入新的子...

			
		

	





	

		

			

				
					
JS操作子节点移动位置

				
			

			

				

					王扬扬的博客
				

				

					10-11
					
					7705
					
				

			

		

		

			
				
 

HTML：


&lt;div id="father"&gt;
    &lt;div class="son" style="color: #8C85E6"&gt;1&lt;/div&gt;
    &lt;div class="son"&gt;2&lt;/div&gt;
    &lt;div class="son&quot

			
		

	





	

		

			

				
					
jQuery插入节点，移动节点

				
			

			

				

					weixin_34081595的博客
				

				

					09-06
					
					141
					
				

			

		

		

			
				

&lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
  $(function(){
    var $li_1 = $("&lt;li title='香蕉'&gt;香蕉&lt;/li&gt;");    //  创建第一个&lt;li&gt;元素
    var $li_2 = $("&lt;li title='

			
		

	





	

		

			

				
					
JS移动DOM节点，将某节点下所有子节点移动（剪切）到另一个节点下。新手很容易踩的坑！

				
			

			

				

					Lanerxx的博客
				

				

					07-23
					
					5165
					
				

			

		

		

			
				
JS移动DOM节点，将某节点下所有子节点移动（剪切）到另一个节点下。新手很容易踩的坑！题目(新手练习题)BUG第一种错误第二种错误解决方案第一种解决方案（无循环）第二种解决方案第三种解决方案（推荐）总结
重点：移动完一个非尾部节点之后，后面的节点会依次部位上来，并且节点数据的长度会实时变化！！
题目(新手练习题)
将上方绿色实线框中的两个列表移动（剪切）到下方绿色虚线框中。
ps：
1、绿色实线框被一个div包裹，绿色虚线框被一个div包裹；
2、绿色实线框中的子节点有两个，分别是圆点样式的列表和圆圈样式的

			
		

	





	

		

			

				
					
js复习：移动元素offsetLeft,offsetTop，10%，30%, left

				
			

			

				

					qq_51813155的博客
				

				

					11-08
					
					1287
					
				

			

		

		

			
				
移动元素1.我们怎么移动元素？
1.我们怎么移动元素？
1.给元素绝对定位 ，有left和right.



			
		

	





	

		

			

				
					
JavaScript移动元素技术解析

				
			

			

				

					
				

			

		

		

			
				
在题目中给出的示例中，展示了如何使用JavaScript移动元素。当元素的`position`属性设置为`absolute`或`relative`时，可以通过修改`top`和`left`样式属性来改变元素在页面上的位置。`moveIt`函数就是一个例子，它...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值