单元格拖拽

最新推荐文章于 2019-05-08 13:29:43 发布
最新推荐文章于 2019-05-08 13:29:43 发布
阅读量400 收藏
点赞数
分类专栏： html/CSS 文章标签： 拖拽 
<html>
 <head>
  <meta charset="utf-8" />
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  table{width: 600px; height: 600px;}
  td.selected{background: #cfe6fd;}
  #info{text-align:center;width:600px;font-size:40px;}
  </style>
 </head>

 <body>
<table border="1" id="test">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<div id="info"></div>
<script type="text/javascript">
  var table = document.getElementById('test');
  var info = document.getElementById('info');

  var isMouseDown = false;

  var start;

  function select(obj){
    (obj.className !== 'selected') && (obj.className = 'selected')
  }

  function unselect(obj){
    obj.className = ''
  }

  function getXY(obj){
    return {
      y : obj.parentNode.rowIndex, //当前单元格所在的行
      x : obj.cellIndex //当前单元格所在的列
    };
  }

  function cleantable(){
    var i = table.rows.length;
    while(i--){
      var row = table.rows[i];

      var j = row.cells.length;

      while(j--){
        unselect(row.cells[j]);
      }
    }
  }

  table.onmousedown = function(e){
    var target = e.target;

    if(target.tagName !== 'TD'){
      return;
    }
    e.preventDefault();
    e.stopPropagation();

    cleantable(); //鼠标点下的时候, 清除整个table中已经处于状态的单元格

    isMouseDown = true
    start = getXY(target);
    select(target)
  }

  //事件绑定这里,自己考虑兼容性...我懒得改了.
  table.addEventListener('mouseover', function(e){
    if(isMouseDown){
      e.preventDefault();
      e.stopPropagation();

      var target = e.target;

      if(target.tagName !== 'TD'){
        return;
      }

      cleantable(); //清除整个table中已经选中的, 因为在下面会重新绘制

      var xy = getXY(target);

      var lr = xy.x - start.x;
      var td = xy.y - start.y;


      //得到要绘制的区域的大小
      var x = Math.abs(lr);
      var y = Math.abs(td);

      info.innerHTML = '选中区域大小:' + (y + 1) + '*' + (x + 1);

      lr = lr > 0 ? 1 : -1;
      td = td > 0 ? 1 : -1;

      // 循环整个区域, 选中该区域内的单元格
      for(var i=0; i<=x; i++){
        for(var j=0; j<=y; j++){
          select(table.rows[start.y + (td * j)].cells[start.x + (lr * i)]);
        }
      }
    }
  }, true);

  table.onmouseup = function(){
    isMouseDown = false;
  }
</script>
 </body>
</html>










                

        

        

    




    

      

        

            

              
                
                  __Daniel
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
html5实现单元格内容拖拽替换

				
			

			

				

					05-02
				

			

		

		

			
				
简单，下载下来即可使用，可根据自己需求更改！！！！！！！！！！！！！

			
		

	



                

              
                



	

		

			

				
					
JS动态拖动表格实现

				
			

			

				

					weixin_30341745的博客
				

				

					03-24
					
					527
					
				

			

		

		

			
				
<HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>JS动态拖动表格实现</TITLE><STYLE>td{width:20%;height:20px;border-bottom:1px solid bla...

			
		

	



                


  
              

                


	

		

			

				
					
js实现单元格拖拽效果

				
			

			

				

					fengGer的博客
				

				

					01-13
					
					1451
					
				

			

		

		

			
				
&amp;lt;head&amp;gt;
	&amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
	&amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;
	&amp;lt;style type=&quot;text/css&quot;&amp;gt;
		* {
			margin: 0;
			padding: 0;
		

			
		

	





	

		

			

				
					
vue页面的table标签进行单元格拖拽

				
			

			

				

					qq_39900178的博客
				

				

					05-08
					
					4021
					
				

			

		

		

			
				
先上代码


<td :dataIndex="index" draggable="true"  @dragend="drop($event)" @dragover="allowDrop($event)" :style="subInfo.flg ? 'border: solid 1px;width: 150px;text-align: center;height: 75px;backgroun...

			
		

	



		

			
		



	

		

			

				
					
表格单元格间数据的拖拽

				
			

			

				

					weixin_33842328的博客
				

				

					10-17
					
					166
					
				

			

		

		

			
				
<!DOCTYPE HTML>
<html>
<style>
    td{
        border:1px solid #444;
        padding:20px;
        width:100px;
        height:50px;
    }
    td div{
        cursor:poi...

			
		

	





	

		

			

				
					
c#DataGridView单元格拖动

				
			

			

				

					11-13
				

			

		

		

			
				
本控件为一个DataGridView用户控件，可以实现在DataGridView进行单元格的任意拖动操作。 本程序开发环境： c# vs2008  测试环境:Windows 2003 windows xp

			
		

	





	

		

			

				
					
IOS实现单元格拖拽移动排序

				
			

			

				

					05-17
				

			

		

		

			
				
iOS UICollectionView实现单元格拖拽移动排序

			
		

	





	

		

			

				
					
table单元格拖拽(vue)

				
			

			

				

					weixin_33859231的博客
				

				

					06-26
					
					1960
					
				

			

		

		

			
				
说明：
项目涉及到手动排课需要单元格拖拽互换课程开始使用的onmousedown实现，看到element tree控件增加了拖拽功能做了单元格拖拽。

修改element：
clone element项目找到packages>table
1.更改element table-body.js
return (                          
<td           ...

			
		

	





	

		

			

				
					
改进的table单元格拖拽，可限制能拖动的连续单元格范围

				
			

			

				

					ForMyQianDuan的博客
				

				

					11-14
					
					1557
					
				

			

		

		

			
				
html>
HEAD>
    META http-equiv="Content-Type" content="text/html; charset=gb2312">
    TITLE>拖动TITLE>
    STYLE>
        td {
            width: 20%;
            height: 20px;
            border-bott

			
		

	





	

		

			

				
					
拖拽表格单元格，改变单元格内容

				
			

			

				

					ForMyQianDuan的博客
				

				

					11-12
					
					1842
					
				

			

		

		

			
				
拖动

td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px sol

			
		

	





	

		

			

				
					
jQuery-----实现拖拽td单元格到其他上面，实现td内容交换的源码分析

				
			

			

				

					define_LIN的博客
				

				

					09-06
					
					1841
					
				

			

		

		

			
				
基于jQuery，实现td单元格的拖拽和交换

&amp;lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;style&amp;gt;
td.hover{border:dotted 3

			
		

	





	

		

			

				
					
使用HTML5拖拽实现表格列移动

					
热门推荐

				
			

			

				

					不忘初心,继续前进
				

				

					04-07
					
					1万+
					
				

			

		

		

			
				
纯前端的移动,不重载数据,不支持换页和数据刷新
实现代码,调用在表格加载完成之后
function add_drag_th(){
		//允许放入  
        $("#callGrid tr>th").on("dragover",function(e){  
            e.originalEvent.preventDefault();  
        });

			
		

	





	

		

			

				
					
C# dataGridView表格，可以鼠标拖动替换单元格行

				
			

			

				

					selaginella的专栏
				

				

					04-25
					
					3271
					
				

			

		

		

			
				
需要实现dataGridView中的 CellMouseMove、DragDrop、CellMouseDown、SelectionChanged、DragEnter 5个事件。
代码如下：


        int selectionIdx;
        //下方为鼠标拖动表格事件
        private void dataGridView1_CellMouseMove(ob

			
		

	





	

		

			

				
					
大学物理册答案上下都有

					
最新发布

				
			

			

				

					04-26
				

			

		

		

			
				
大学物理册答案上下都有

			
		

	





	

		

			

				
					
UWB超宽带信道研究及源码.zip

				
			

			

				

					04-26
				

			

		

		

			
				
1.版本：matlab2014/2019a/2021a

 2.附赠案例数据可直接运行matlab程序。 

3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 

4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 



			
		

	





	

		

			

				
					
js单元格拖拽交换位置

				
			

			

				

					05-12
				

			

		

		

			
				
你可以使用HTML5的Drag and Drop API来实现单元格拖拽交换位置的功能。下面是一个简单的示例：  首先，在HTML中创建一个表格：  ```html     (event)">单元格1  (event)">单元格2  (event)">单元格3      (event)">...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值