<html>
<head>
<title>拖动行测试</title>
<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>
</head>
<body>
<table id="filelistTab" cellspacing="0" cellpadding="2" border=1>
<tr>
<td class="gridtitle" style="WIDTH: 40px">列一</td>
<td class="gridtitle" style="WIDTH: 100px">列二</td>
<td class="gridtitle" style="WIDTH: 110px">列三</td>
</tr>
<tr id="1" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group1" style="WIDTH: 30px" type="text" readonly value="1" /></td>
<td class="gridtitle">
11111111111111111111
</td>
<td class="gridtitle"><input class="text" id="fn1" readOnly type="text" style="width:100px" value="11111111111111111111" /></td>
</tr>
<tr id="2" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group2" style="WIDTH: 30px" type="text" readonly value="2" /></td>
<td class="gridtitle">
222222222222222222222
</td>
<td class="gridtitle"><input class="text" id="fn2" readOnly type="text" style="width:100px" value="22222222222222222222222" /></td>
</tr>
<tr id="3" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group3" style="WIDTH: 30px" type="text" readonly value="3" /></td>
<td class="gridtitle">
3333333333333333333333
</td>
<td class="gridtitle"><input class="text" id="fn3" readOnly type="text" style="width:100px" value="333333333333333" /></td>
</tr>
<tr id="4" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group4" style="WIDTH: 30px" type="text" readonly value="4" /></td>
<td class="gridtitle">
444444444444444444444
</td>
<td class="gridtitle"><input class="text" id="fn4" readOnly type="text" style="width:100px" value="4444444444444444444444444444" /></td>
</tr>
<tr id="5" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group5" style="WIDTH: 30px" type="text" readonly value="5" /></td>
<td class="gridtitle">
55555555555555555555555
</td>
<td class="gridtitle"><input class="text" id="fn5" readOnly type="text" style="width:100px" value="555555555555555555555" /></td>
</tr>
<tr id="6" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group6" style="WIDTH: 30px" type="text" readonly value="6" /></td>
<td class="gridtitle">
6666666666666666666666666
</td>
<td class="gridtitle"><input class="text" id="fn6" readOnly type="text" style="width:100px" value="666666666666666666666" /></td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
这个API允许用户通过鼠标或触摸操作来拖动元素，并将它们放置在其他可接受的位置。实现拖放功能主要包括以下步骤： 1. **启用拖动**：在你想要拖动的元素（在这个例子中是单元格）上添加`draggable`属性，设置为`...
"拖动单元格改变列宽或行高"是一种提升用户体验的功能，允许用户通过拖动单元格边框来调整表格的列宽和行高，以适应他们的阅读或编辑需求。这个功能尤其适用于数据密集型的应用，如电子表格或者数据展示平台，它提供...
2. **拉伸单元格宽度**：在编辑器中，用户可以拖动表格的边框来调整单元格的宽度，以适应不同的显示需求。这种灵活性有助于确保内容的可读性和美观性。 3. **增加行和列**：当用户需要在现有表格中添加更多数据时，...
总的来说，"可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]"是一个涉及到JavaScript事件处理、浏览器兼容性以及用户交互设计的实用技术，它提升了网页的用户体验，同时也体现了前端开发者对细节和用户...
在给定的文件“表格设计器拖动单元格改变列宽或行高(JS插件)”中，可能包含了实现这个功能的源代码和示例。使用这类插件可以大大简化开发工作，提高效率，同时也更容易维护和扩展。 总之，“拖动table单元格改变...
4. **扩展功能**：如拖拽列和导出，可能需要额外的JavaScript代码和CSS样式来实现。例如，使用`colReorder`插件实现列拖动，使用`buttons`插件进行数据导出。 这个示例项目"DataTablesDemo"提供了一个完整的集成...
在本文中，我们将深入探讨如何使用JavaScript库TinyMCE实现一个功能，允许用户通过拖动操作实时调整表格单元格的大小。TinyMCE是一个强大的富文本编辑器，它提供了丰富的功能，包括创建和编辑HTML文档，以及对表格的...
JavaScript 提供了实现这一功能的强大支持，特别是对于div、table等网页元素的拖动操作。在这个主题中，我们将深入探讨如何使用JavaScript来实现这些元素的拖放功能，并兼容不同的浏览器，包括IE、Firefox、Opera和...
在JavaScript中实现单元格拖拽效果，主要是通过监听鼠标事件并改变元素的位置来完成的。以下将详细解析这个实例中的各个部分以及所涉及的关键知识点： 1. **CSS基础布局**： - `* { margin: 0; padding: 0; }` ...
在提供的文件中，`dd_v4_3.html`、`dd_1.html`可能是演示数据拖拽功能的示例页面，`index.html`很可能是项目的主入口，而`ext-all-debug.js`和`ext-all.js`是EXT库的完整版本，包含所有组件和功能，`ext-core.js`则...
4. **js可拖动层**：js可拖动层.htm可能是一个实现页面元素可拖动的示例，通过JavaScript监听鼠标的mousedown、mousemove和mouseup事件，动态修改元素的位置，让用户可以通过鼠标拖动来移动页面上的某个部分。...
在提供的"grid"文件中，可能包含了实现拖动功能的代码示例，包括HTML结构、CSS样式以及JavaScript逻辑。分析和理解这些代码可以帮助你更好地掌握拖动表格行和列的具体实现步骤。 总的来说，实现JavaScript拖动表格...
在本资源中，我们关注的是"gridster.js"，这是一个基于jQuery的插件，用于创建可拖动的网格布局。这个插件使得开发者能够轻松实现自定义的网格系统，用户可以通过拖放操作自由调整各个单元格的大小和位置，适用于...
在本案例中，我们探讨的是一个名为“GridViewPageable”的自定义控件，它扩展了标准的GridView功能，增加了分页和列可拖动的特性。这种增强使得开发者在构建数据密集型应用时能更方便地调整布局，提高用户体验。 ...
4. **设置可放置目标**：对于接收拖放的单元格，可以使用CSS来标记它们，比如添加一个特定的类，然后在JavaScript中检测这个类来确定是否允许放置。 5. **处理放置事件**：在目标单元格上，需要监听`ondrop`事件。...
`<table>`元素可能包含一些特殊的类名或属性，用于标识可排序或可拖动的列，而JavaScript代码则负责解析这些标记并添加相应的行为。 总结来说，"可拖动、排序的表格"是利用JavaScript增强网页中表格功能的一个实例...
标题“任意改变table表格td的宽度 支持表格TD拖拽”和描述中反复提到的“动态td的宽度”，就是指这种功能，即允许用户通过拖动来调整表格单元格的宽度。 实现这一功能通常需要结合JavaScript（或者更高级的库如...
`dragging` 表示当前是否正在拖动滑动单元格，控制动画的执行时机。 在组件的 methods 中，有 `handleClickOutside`、`getClickHandler` 和 `onClick` 函数。`handleClickOutside` 是外部点击事件的处理函数，`...
在这个示例中，我们将在表格的单元格上应用这两个组件，使得用户可以自由拖拽单元格内的内容。 实现步骤如下： 1. 引入必要的库：在HTML文件中，我们需要引入jQuery1.11.3.min.js和jQuery UI的相关CSS和JS文件。...
请注意，上述代码只是一个基础示例，实际应用中可能需要处理更多边界情况，例如防止行的重复交换、处理多个可拖动区域以及兼容不同的浏览器等。此外，为了优化性能，可以考虑使用事件委托来减少事件监听器的数量，...