`
ganjuelovejava
  • 浏览: 94014 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论

表格拖动效果js

    博客分类:
  • JS
阅读更多
window.onload=function(){
drag(document.getElementById('drag1'));
drag(document.getElementById('drag2'));
drag(document.getElementById('drag3'));
drag(document.getElementById('drag4'));
};
function drag(o,r)
{
/*取得o.parentNode.parentNode.cells的宽度,兼容IE6和Firefox*/
o.p_p_c_gw=function(index)
{
if(window.ActiveXObject)
{
return o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth;
}
else
{
return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth)-
parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding)*2-2;
}
}
/*设置所有行的第index个单元格为w,在IE下可只设第一行*/
o.p_p_p_sw=function(index,w)
{
for(var i=0;i<o.parentNode.parentNode.parentNode.parentNode.rows.length;i++)
{
o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width=w;
}
}

//var out=document.getElementById('my');
o.firstChild.onmousedown=function(){return false;};
o.onmousedown=function(a)
{
var d=document;
if(!a)
a=window.event;
var lastX=a.clientX;
//有时候拖拽过快表格会变大,至于为什么会这样我也不清楚。watch_dog是为了保证表格不会变大,
var watch_dog=o.p_p_c_gw(0)+o.p_p_c_gw(1);
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
d.onmousemove=function(a)
{
if(!a)
a=window.event;
if(o.p_p_c_gw(0)+o.p_p_c_gw(1)>watch_dog)
{
o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(0));
return;
}
var t=a.clientX-lastX;
//out.innerHTML=t;
if(t>0)
{
//right
if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+1].style.width)-t<10)
return;
o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t);
o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t);
}
else
{
//left
if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex].style.width)+t<10)
return;
o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t);
o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t);
  }
  lastX=a.clientX;
  };
  d.onmouseup=function()
  {
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
   };
};
}
分享到:
评论

相关推荐

    js表格内容拖拽效果.zip

    "js表格内容拖拽效果.zip"这个资源提供了一种创新的解决方案,它包含了10个不同的示例,展示了如何在网页表格中实现内容的拖放功能。这种功能可以让用户通过简单的鼠标操作,自由地将表格内的数据从一个单元格移动到...

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

    这款"表格列自由拖动排序js代码"提供了这样一个功能,允许用户通过单击并长按表格的列头来自由移动列的位置,从而根据需要调整表格的布局。同时,它还支持点击表格头部进行数据的升序或降序排列,这在处理大量数据时...

    bootstrap-table.css 表格拖拽排序

    这个JavaScript库提供了一种简单的方式来处理表格行的拖拽事件,当用户拖动表格行时,库会捕获这些事件并更新表格的DOM结构,以反映出行的新顺序。TableDnD库还提供了回调函数,可以在拖放操作开始、结束或过程中...

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

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

    JS实现的超酷表格拖拽翻页效果

    使用JavaScript实现的用鼠标拖拽实现表格翻页的效果。

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

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

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

    总结,实现jQuery UI拖拽效果的关键在于正确配置`draggable`和`droppable`组件,并确保HTML结构支持拖放行为。通过结合JavaScript和CSS,我们可以创建出直观且易于使用的用户界面,让用户能够方便地将div中的数据...

    JS可拖动排序的表格

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

    JS实现的无比强大各种情况下的表格内容拖拽效果.zip

    本项目“JS实现的无比强大各种情况下的表格内容拖拽效果”即利用了JavaScript的强大功能,为用户提供了在不同场景下对表格内容进行拖放操作的解决方案。 在网页开发中,表格是一种常见的数据展示形式,它能够清晰地...

    jQuery表格可拖动调整列宽度大小

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题聚焦于jQuery中的一个实用特性——表格列宽的拖动调整,这是一个提高用户体验的功能,允许用户根据需要...

    原生javascript实现拖拽改变table表格行高(html)

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

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

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

    可以任意拖拽的表格排序页面js文件包

    本压缩包“可以任意拖拽的表格排序页面js文件包”提供了一个高效的解决方案,让用户能够通过直接拖拽表格行来改变数据的顺序。这个功能在数据管理、报告展示等场景中非常实用,使得用户无需借助其他操作按钮或下拉...

    table实现列宽的拖动效果

    综上所述,"table实现列宽的拖动效果"涉及到前端开发中的多个技术点,包括HTML表格、JavaScript事件处理、DOM操作、CSS样式设计、响应式布局、性能优化以及用户交互设计等。通过学习和实践这些知识,开发者可以提升...

    js表格拖拽

    js表格拖拽效果,可以将tr拖动到表格的任意一行,实现用户自定义tr的排列

    Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序

    原创亲测至少节约小白两天时间,本人前端小白搞了好几天才实现表格拖动排序。在网上找的(vue3+sortable.js根本跑不起来)网上好多例子在vue3下根据跑不起来于是,也没有对表格排序的例子。Vuedraggable 是基于并...

    表格的拖拽功能

    在实现表格拖拽功能时,jQuery可以用于选择表格元素,绑定`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标抬起)事件,从而跟踪用户的拖动操作。 最后,`Drag.js`很可能是一个自定义的...

    jquery插件colResizable实现表格列可拖拽伸缩表格大小

    本篇文章将深入探讨如何使用jQuery插件colResizable来实现表格列的拖拽伸缩功能,从而使用户可以根据需要调整表格的列宽,提高用户界面的可定制性和交互性。 colResizable是一个轻量级的jQuery插件,它为HTML表格...

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

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

    js表格列拖动排序代码.zip

    【标题】"js表格列拖动排序代码.zip"是一个压缩包,其中包含了实现JavaScript(JS)表格列拖动排序功能的代码。这个功能允许用户通过鼠标长按表格的列头来自由地拖动和排序列,实现列之间的互换,同时提供升序或降序...

Global site tag (gtag.js) - Google Analytics