`
zendj
  • 浏览: 122003 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

用鼠标拖动表格进行排序.

阅读更多

用鼠标拖动表格进行排序.

<script language="javascript">
var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}

function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
}

</script>
用鼠标拖动表格进行排序<br>
用鼠标移动TR<br>
<TABLE WIDTH="300" BORDER="1" >

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=blue>0</TD><TD>0</TD><TD>0</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=black>1</TD><TD>1</TD><TD>1</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=red>2</TD><TD>2</TD><TD>2</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>3</TD><TD>3</TD><TD>3</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>4</TD><TD>4</TD><TD>4</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>5</TD><TD>5</TD><TD>5</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>6</TD><TD>6</TD><TD>6</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR>

</script>
</TABLE>

分享到:
评论

相关推荐

    用鼠标拖动表格进行排序

    在网页设计和开发中,用户交互性是至关重要的一个方面,而“用鼠标拖动表格进行排序”就是提升用户体验的一种有效方法。这个功能允许用户通过简单的鼠标操作来改变表格中的数据顺序,使得信息的查看和管理更为直观和...

    jQuery表格列自由拖动排序.zip

    &lt;!... &lt;... &lt;head&gt; ...meta charset="UTF-8"&gt;...表格列自由拖动排序js... 一款非常不错的表格列自由拖动排序js代码,单击鼠标长按表格列自由拖动排序,互换列排序代码,点击表格头部支持表格数据升降大小排序效果。

    鼠标拖动实现表格行交换.docx

    本文将介绍如何通过鼠标拖动实现表格行交换,这是一个非常实用的功能,尤其是在需要用户自定义排序的场景下。我们将从HTML结构、CSS样式以及JavaScript逻辑三个方面详细解析这一功能的实现。 首先,HTML部分是构建...

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

    3. **表格排序算法**:实现列的升序或降序排序通常需要一个排序算法,如快速排序、冒泡排序或插入排序。排序后,需要更新表格数据及对应的DOM结构。 4. **CSS样式调整**:为了提供视觉上的交互反馈,可能还需要用到...

    js拖拽Table表格列排序.rar

    本文将详细讲解如何实现JS拖拽Table表格列排序的功能,并结合提供的"js拖拽Table表格列排序.rar"文件进行解析。 首先,我们需要理解HTML中的Table结构。一个基本的HTML Table由`&lt;table&gt;`标签开始,内部包含`&lt;tr&gt;`...

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

    《CSS3表格列自由拖动排序JS代码详解》 在网页设计中,用户交互体验是至关重要的一个环节,其中表格的列拖动排序功能能够极大地提高用户的操作便捷性。本篇将详细介绍如何利用CSS3和JavaScript实现表格列的自由拖动...

    点击表格拖动排序

    这个功能使得用户可以通过直接拖动表格行来调整数据顺序,提供了直观且友好的交互体验。本篇文章将深入探讨如何利用jQuery库来实现这一功能。 首先,我们需要引入jQuery库。jQuery是一款强大的JavaScript库,它简化...

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

    本文将详细探讨如何使用jQuery实现表格列表的拖动排序功能,包括拖动时的高亮显示以及支持任意拖动后的自动回位。 首先,我们需要了解jQuery的核心概念。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档...

    鼠标拖动表格改变宽度,动态Ajax数据排序示例.rar

    这个"鼠标拖动表格改变宽度,动态Ajax数据排序示例.rar"压缩包提供了一个实用的JavaScript和Ajax实现,允许用户通过鼠标操作来改变表格列宽以及进行动态数据排序,极大地提升了用户体验。以下是关于这个示例中的关键...

    jQuery实现表格列表拖动排序特效源码.zip

    本文将详细探讨如何使用jQuery实现表格列表的拖动排序特效。 首先,我们需要理解jQuery的核心概念。jQuery库通过简洁的语法封装了DOM操作、事件处理、动画效果以及Ajax交互等复杂功能,使得开发者能够更高效地编写...

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

    以上就是使用JavaScript实现可拖动排序表格的基本步骤。实际开发中,你可能会遇到更多细节问题,如防止行重叠、处理表格滚动等。对于更复杂的需求,可以考虑使用现成的库,如`Sortable.js`或`jQuery UI Sortable`,...

    可拖动、排序的表格

    通常,开发者会监听鼠标的`mousedown`、`mousemove`和`mouseup`事件,当用户点击并拖动表格行时,这些事件会被触发。在拖动过程中,JavaScript会更新表格的DOM结构以反映新的排序顺序。同时,它还会处理边界检测,...

    JS可拖动排序的表格

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

    表格拖动排序

    在IT领域,表格拖动排序是一项常见的用户交互功能,它极大地提升了数据操作的便捷性和用户体验。这个技术尤其适用于数据密集型的应用,如数据分析工具、项目管理软件或在线数据库。"表格行拖动排序"功能允许用户通过...

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

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

    可拖动、排序的表格非常灵活,样式也很好看

    `SortTable.js` 文件是实现表格排序功能的关键。通常,这样的脚本会遍历表格的列头(`&lt;th&gt;`),为它们添加点击事件监听器。当用户点击列头时,脚本会根据该列的数据对整个表格进行升序或降序排序。实现这一功能的...

    bootstrap-table.css 表格拖拽排序

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

    实现table表格可按行拖拽,按列排序,并可以保存排序后的结果

    它允许用户通过鼠标拖动来重新排列表格中的行,极大地提升了用户在查看和管理数据时的灵活性。这个插件处理了拖放过程中的一系列细节,如鼠标样式、拖动阴影、行位置交换等,使得整个过程流畅自然。 要将这两个插件...

Global site tag (gtag.js) - Google Analytics