`

JS实现数据拖动，从一个表格拖动到另一个表格带拖动效果

 
阅读更多 
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">   
  <HTML>   
    <HEAD>   
      <title>WebForm2</title>   
      <meta   name="GENERATOR"   content="Microsoft   Visual   Studio   .NET   7.1">   
      <meta   name="CODE_LANGUAGE"   content="Visual   Basic   .NET   7.1">   
      <meta   name="vs_defaultClientScript"   content="JavaScript">   
      <meta   name="vs_targetSchema"   content="http://schemas.microsoft.com/intellisense/ie5">   
      <SCRIPT   language="javascript">   
    
  /*--------全局变量-----------*/   
  var   x0,y0,x1,y1,isreplace;   
  var   movable   =   false;   
  var   preCell   =   null;   
  var   normalColor   =   null;   
  var   preColor   =   "lavender";   
  var   endColor   =   "#FFCCFF";   
  /*--------全局变量-----------*/   
    
  //得到控件的绝对位置   
  function   getPos(cell)   
  {   
    var   pos   =   new   Array();   
    var   t=cell.offsetTop;   
    var   l=cell.offsetLeft;   
    while(cell=cell.offsetParent)   
    {   
      t+=cell.offsetTop;   
      l+=cell.offsetLeft;   
    }   
    pos[0]   =   t;       //纵坐标   
    pos[1]   =   l;       //横坐标   
    return   pos;   
  }   
    
  //当鼠标拖动某一个td时,显示临时图层   
  function   showDiv(ischange)   
  {   
    var   ischange=ischange   
    isreplace=ischange                                             //得到触发该事件的是哪个table来决定是否替换   
    var   obj   =   event.srcElement;                           //得到触发该事件的对象,也就是对触发该事件对象的一个引用   
    var   pos   =   new   Array();                                     //定义一个数组用来存放位置参数   
    //获取过度图层   
    var   oDiv   =   document.all.tempDiv;                 //对临时层的一个引用   
    if(obj.tagName.toLowerCase()   ==   "td")   
    {   
      obj.style.cursor   =   "hand";                           //当按下鼠标时,鼠标模式改成手型   
      pos   =   getPos(obj);                                           //得到该td的位置(包括横纵坐标)   
      //计算中间过度层位置，赋值   
      oDiv.style.width   =   obj.offsetWidth;         //得到td的宽,赋值给临时层tempDiv   
      oDiv.style.height   =   obj.offsetHeight;     //得到td的高,赋值给临时层tempDiv   
      oDiv.style.top   =   pos[0];                               //得到该td的纵坐标的位置,赋值给临时层tempDiv   
      oDiv.style.left   =   pos[1];                             //得到该td的横坐标的位置,赋值给临时层tempDiv   
      oDiv.innerHTML   =   obj.innerHTML;                 //得到该td的文本显示内容,赋值给临时层tempDiv   
      oDiv.style.display   =   "";                               //显示临时层,也就是当鼠标选中某一个td,按下去时显示的那个紫红色的框框   
      x0   =   pos[1];   
      y0   =   pos[0];   
      x1   =   event.clientX;                                         //返回当前鼠标所在位置的横坐标   
      y1   =   event.clientY;                                         //返回当前鼠标所在位置的纵坐标     
      //记住原td   
      normalColor   =   obj.style.backgroundColor;     //得到触发该事件对象的背景色   
      obj.style.backgroundColor   =   preColor;           //改变触发该事件的对象的背景色   
      preCell   =   obj;                                                         //赋值给另外一个空对象(属公共的变量)   
        
      movable   =   true;                                                       //标识有td在移动   
    }   
  }   
  //当拖动一个td时,经过其他td时所处理的事件   
  function   dragDiv()   
  {   
    if(movable)                                                                     //当上面的showDiv事件为真时,执行下面的代码   
    {   
      var   oDiv   =   document.all.tempDiv;                         //对临时层的一个引用   
      var   pos   =   new   Array();                                             //定义一个存放位置的数组   
      oDiv.style.top   =   event.clientY   -   y1   +   y0;       //定义临时层的位置(纵坐标)为:当前鼠标位置(纵坐标)-按下鼠标时的鼠标位置(纵坐标)+原来td的纵坐标   
      oDiv.style.left   =   event.clientX   -   x1   +   x0;     //定义临时层的位置(横坐标)为:当前鼠标位置(横坐标)-按下鼠标时的鼠标位置(横坐标)+原来td的横坐标   
      var   oTable   =   document.all.tb2;     
      //根据条件显示不同背景色   
      for(var   i=0;   i<oTable.cells.length;   i++)   
      {   
        if(oTable.cells[i].tagName.toLowerCase()   ==   "td")   
        {   
          pos   =   getPos(oTable.cells[i]);   
          if(event.x>pos[1]   &&   event.x<pos[1]+oTable.cells[i].offsetWidth   &&   event.y>pos[0]   &&   event.y<pos[0]+oTable.cells[i].offsetHeight)   
          {   
            if(oTable.cells[i]   !=   preCell)   
              oTable.cells[i].style.backgroundColor   =   endColor;             
          }   
          else   
          {   
            if(oTable.cells[i]   !=   preCell)   
              oTable.cells[i].style.backgroundColor   =   normalColor;   
          }   
        }   
      }         
    }   
  }   
    
  function   hideDiv()   
  {   
    if(movable)   
    {   
      var   oTable   =   document.all.tb2;   
      var   pos   =   new   Array();     
      if(preCell   !=   null)   
      {   
        for(var   i=0;   i<oTable.cells.length;   i++)   
        {         
          pos   =   getPos(oTable.cells[i]);   
          //计算鼠标位置，是否在某个单元格的范围之内   
          if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth     &&   event.y>pos[0]&&   event.y<pos[0]+oTable.cells[i].offsetHeight)   
          {   
            if(oTable.cells[i].tagName.toLowerCase()   ==   "td"   &&   oTable.cells[i].style.backgroundColor.toLowerCase()=="#ffccff")   
            {   
              if(isreplace=="2"){                 //如果是下面表格内部拖动,则内容互换   
                  preCell.innerHTML   =   oTable.cells[i].innerHTML;   
              }   
        //当下面的td中有内容时,则上面的课程将与下面的课程互换----注意:这个if和下面紧接着的if位置不能互换.   
        if(isreplace=="1"   &&   oTable.cells[i].innerText.length   >   1){               
            preCell.innerHTML=   oTable.cells[i].innerHTML   
            oTable.cells[i].innerHTML   =   document.all.tempDiv.innerHTML;   
        }   
        //当下面的td中没有内容时,则上面的课程将被移除----注意:这个if和上面紧接着的if位置不能互换.   
        if(isreplace=="1"   &&   oTable.cells[i].innerText.length   ==   1){                 
            preCell.innerHTML=""   
            oTable.cells[i].innerHTML   =   document.all.tempDiv.innerHTML;   
        }   
          
        if(isreplace=="2"){   
            oTable.cells[i].innerHTML   =   document.all.tempDiv.innerHTML;   
        }   
              //清除原单元格和目标单元格的样式   
              preCell.style.backgroundColor   =   normalColor;   
              oTable.cells[i].style.backgroundColor   =   normalColor;   
              oTable.cells[i].style.cursor   =   "";   
              preCell.style.cursor   =   "";   
              preCell.style.backgroundColor   =   normalColor;   
            }   
          }   
        }   
      }   
      movable   =   false;   
      //清除提示图层   
      document.all.tempDiv.style.display   =   "none";       
    }   
  }   
  //在页面提交时触发下面的事件,给隐藏字段赋值   
  function   getvalue(){   
      for(var   i=0;   i<oTable.cells.length;   i++){   
        document.all["kc_name"+i].value   =   oTable.cells[i].innerHTML;   
        //alert(document.all["kc_name"+i].value)   
      }   
  }   
  document.onmouseup   =   function()   
  {     
    hideDiv();   
    var   oTable   =   document.all.tb2;   
    for(var   i=0;   i<oTable.cells.length;   i++)   
      oTable.cells[i].style.backgroundColor   =   normalColor;   
  }   
    
  document.onmousemove   =   function()   
  {   
    dragDiv();   
  }   
    
  </SCRIPT>
  </HEAD>   
    <body   MS_POSITIONING="GridLayout">   
    <form   name="Form1"   method="post"   action="WebForm11.aspx"   id="Form1">   
          <table   id="tb1"   cellspacing="0"   onMouseDown="showDiv('1')"   onselectstart="return   false;"   border="0"   style="width:200px;border-collapse:collapse;BORDER-RIGHT:black   1px   solid;   BORDER-TOP:black   1px   solid;   FONT-SIZE:13px;   BORDER-LEFT:black   1px   solid;   BORDER-BOTTOM:black   1px   solid">   
    <tr>   
      <td>语文</td>           
    </tr>   
    <tr>   
      <td>数学</td>   
    </tr>   
    <tr>   
      <td>英语</td>   
    </tr>   
    <tr>   
      <td>物理</td>   
    </tr>   
    <tr>   
      <td>化学</td>   
    </tr>   
    <tr>   
      <td>地理</td>   
    </tr>   
    <tr>   
      <td>生物</td>   
    </tr>   
    <tr>   
      <td>历史</td>   
    </tr>   
    <tr>   
      <td>政治</td>   
    </tr>   
  </table>   
    <TABLE   style="BORDER-RIGHT:black   1px   solid;   BORDER-TOP:black   1px   solid;   FONT-SIZE:13px;   BORDER-LEFT:black   1px   solid;   BORDER-BOTTOM:black   1px   solid"   
          id="tb2"   onMouseDown="showDiv('2')"   onselectstart="return   false;"   cellpadding="0"   cellspacing="1"   
          bordercolor="#ffccff"   bgcolor="#999999"   width="200">   
          <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">&nbsp;   
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">&nbsp;   
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">&nbsp;   
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">&nbsp;   
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">&nbsp;   
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">&nbsp;   
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">&nbsp;   
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">&nbsp;   
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">&nbsp;   
        </td>   
          </tr>   
      <input   type="hidden"   name="kc_name0"   value="">   
      <input   type="hidden"   name="kc_name1"   value="">   
      <input   type="hidden"   name="kc_name2"   value="">   
      <input   type="hidden"   name="kc_name3"   value="">   
      <input   type="hidden"   name="kc_name4"   value="">   
      <input   type="hidden"   name="kc_name5"   value="">   
      <input   type="hidden"   name="kc_name6"   value="">     
      <input   type="hidden"   name="kc_name7"   value="">   
      <input   type="hidden"   name="kc_name8"   value="">   
      </TABLE>   
            <DIV   id="tempDiv"   onselectstart="return   false"   style="cursor:hand;position:absolute;   border:1px   solid   black;   background-color:#FFCCFF;   display:none">   
        </DIV>   
      </form>   
    </body>   
  </HTML>
分享到：
| org.apache.catalina.util.DefaultAnnotati ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于EXT2.0.2表格间数据拖拽

    DragDrop组件允许用户将元素从一个位置拖动到另一个位置，而DragDropGroup则使得多个DragDrop对象能够相互交互，例如在不同的表格之间进行数据交换。 首先，我们需要创建两个EXT Grid实例，每个Grid都有自己的...

    基于Vue实现可以拖拽的树形表格

    在Vue.js框架中实现一个可拖拽的树形表格是一项技术挑战，涉及到组件设计、事件处理、数据管理和DOM操作等多个方面。Vue.js以其简洁的API和强大的响应式系统深受开发者喜爱，而添加拖拽功能则需要用到HTML5的Drag ...

    表格列自由拖动排序js代码

    在网页开发中，实现表格列的自由拖动排序是一个增强用户体验的重要特性。这款"表格列自由拖动排序js代码"提供了这样一个功能，允许用户通过单击并长按表格的列头来自由移动列的位置，从而根据需要调整表格的布局。...

    一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子

    "一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子" 提供了一个解决方案，让开发者能够轻松地为他们的网页应用添加动态且用户友好的功能。这个类库专门针对表格数据展示，允许用户通过拖动列头来...

    JS可拖动排序的表格

    JS（JavaScript）作为一种强大的客户端脚本语言，被广泛用于实现各种动态效果和用户交互，其中包括可拖动和排序的表格功能。这种功能允许用户通过鼠标拖放操作来改变表格中行或列的顺序，提升数据管理的便捷性。下面...

    原生javascript实现拖拽改变table表格行高（html）

    标题提到的“原生javascript实现拖拽改变table表格行高”是一项技术挑战，因为大部分在线资源都集中在改变列宽上，而对行高的调整相对较少。 首先，我们需要理解HTML表格的基本结构。表格由`&lt;table&gt;`元素定义，内部...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    在本文中，我们将深入探讨如何使用jQuery UI库实现一个功能，即允许用户将div元素的值拖拽到HTML表格中。这个功能对于构建交互式、动态的网页界面非常有用，可以提升用户体验，使得数据操作更加直观和便捷。我们将...

    vue Element ui实现table列拖动效果

    Vue.js 是一款非常流行的前端框架，它以其轻量级、高效和易用性著称。Element UI 是基于 Vue 的一套组件...通过以上的实现方式，你可以在 Vue 和 Element UI 项目中轻松地创建一个支持列拖动的表格，提升用户交互体验。

    table实现列宽的拖动效果

    "table实现列宽的拖动效果"是一个常见的需求，特别是在数据展示或者数据分析的应用中，用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...

    JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序

    在本主题中，我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序功能，适用于列表、菜单和表格等元素。 一、拖拽排序基础概念 拖拽排序是一种用户交互设计，允许用户通过鼠标拖动来改变元素的顺序。这种功能在...

    js实现html表格列宽可拖拽修改

    js实现html表格列宽可拖拽修改 .

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    总的来说，通过jQuery和JavaScript的组合，我们可以实现一个功能完善的表格列宽度拖动调整功能，提升用户的交互体验。这个功能对于数据展示和列表页面尤其有用，让用户可以根据自己的需求自由调整列宽，使得数据更加...

    可拖动行列的表格

    在IT领域，尤其是在数据展示和用户交互设计中，“可拖动行列的表格”是一个重要的功能，它极大地提升了用户的操作体验和数据管理效率。这个特性常见于各种数据分析工具、电子表格软件以及网页应用中，比如Google ...

    Ext实现的拖拽树和表格之间的拖拽

    拖拽功能允许用户通过鼠标操作将数据从一个位置移动到另一个位置，增强了用户体验并简化了数据操作。 实现拖拽功能，我们需要使用ExtJS提供的DD（Drag and Drop）API。DD API包括几个关键类，如DragSource、...

    js原生实现表格行的拖动排序

    在JavaScript原生开发中，实现表格（Table）行的拖动排序是一项常见的需求，尤其是在创建交互性强的数据展示页面时。这个功能允许用户通过鼠标拖动来改变表格中行的顺序，提升用户体验。以下是一个详细的知识点说明...

    easyui-表格拖动的实现

    在"easyui-表格拖动的实现"这个主题中，我们将深入探讨如何利用 EasyUI 的功能实现表格数据的拖放操作（Drag and Drop，简称DND）。 1. **EasyUI 的 Drag and Drop 功能**： EasyUI 支持 DND，允许用户通过鼠标...

    js表格内容拖拽效果.zip

    这种功能可以让用户通过简单的鼠标操作，自由地将表格内的数据从一个单元格移动到另一个单元格，极大地提升了用户体验。 首先，要理解拖放（Drag and Drop）功能是HTML5引入的一种API，允许开发者创建出具有物理...

    兼容主流浏览器的纯JS动态拖动表格实现行列内容交换

    项目开发中需要用到一个拖动交换表格的功能，上网搜到雅虎的一个控件，结果简单的一个拖动交换行，就要引入七八个js library，太麻烦了。就自己综合网上资源写了一个可兼容IE，firefox，Chrome，Safari和Opera等主流...

    js可拖动排序的表格可拖动排序的表格可拖动排序的表格

    在JavaScript（简称js）开发中，创建一个可拖动排序的表格是一项常见的需求，尤其在构建交互性强的数据展示界面时。这种功能可以让用户通过直观的拖放操作来调整表格中的行顺序，从而实现数据的定制化排列。下面将...

    javascript实现表格的单元格拖动排序

    javascript实现表格的单元格拖动排序，对实现图片的拖动排序有启发

Magicbox
Global site tag (gtag.js) - Google Analytics