通过js实现简单的table拖动功能，目前拖动的cell设置为td层，可扩展。
附件中table.html是朋友传给我的，原作者不详，在此对他表示感谢，我这里应该叫扩展，标题有点大了，drag table demo.html是我修改之后的一个小例子，传上来主要是供本人学习借鉴。
本想查下jQuery的，好像没有找到单元格可以拖动的，看这个比较简单，就没有仔细研究jQuery的插件了，直接改这个了。
<html>
<style>
body{
font-size:9pt;
}
table,th,td{
font-size:9pt;
}
.lsitTalbe{
table-layout:fixed;
width:30%;
border-collapse:collapse;
border-color:#507010;
color:#003300;
}
.pageda{
font-family:Webdings;
font-size:12pt;
color:#CCCCCC;
cursor:default;
}
.pageua{
font-family:Webdings;
font-size:12pt;
}
.even{
background:#e8f8d0;
}
.odd{
background:#f8fcf0;
}
.header{
background:a0dc40;
color:003300;
}
</style>
<head>
<TITLE>Drag Table Demo</TITLE>
</head>
<body>
<table>
<tr>
<td>
<table class="lsitTalbe" align="center" border="1" cellspacing="1" cellpadding="1" onmousedown="mousedown()" onmouseup="mouseup()" onmousemove="mousemove()" >
<tr class="header">
<th width="10%">列1</th>
<th width="10%">列2</th>
<th width="40%">列3</th>
<th width="40%">列4</th>
<tr>
<tr class="even" id="tr_1">
<TD style="cursor:move" title="按住可拖动">1</TD>
<TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=chkTaskItem_3 type=checkbox value=3 name=chkTaskItem></TD>
<TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=txtTaskName_3 type=txtTaskName size=10 name=txtTaskName value="test1"></TD>
<TD style="cursor:move" title="按住可拖动">test1</TD>
</tr>
<tr class="odd" id="tr_2">
<TD style="cursor:move" title="按住可拖动">2</TD>
<TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=chkTaskItem4 type=checkbox value=4 name=chkTaskItem></TD>
<TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=txtTaskName_4 type=txtTaskName size=10 name=txtTaskName value="test2"></TD>
<TD style="cursor:move" title="按住可拖动">test2</TD>
</tr>
<tr class="even" id="tr_3">
<TD style="cursor:move" title="按住可拖动">3</TD>
<TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=chkTaskItem_5 type=checkbox value=5 name=chkTaskItem></TD>
<TD style="cursor:move" title="按住可拖动"><INPUT class=inputStyle id=txtTaskName_5 type=txtTaskName size=10 name=txtTaskName value="test3"></TD>
<TD style="cursor:move" title="按住可拖动">test3</TD>
</tr>
</table>
<td>
</tr>
</table>
</body>
</html>
<script language="javaScript">
//源对象
var srcRowIndex;
//目标对象
var targetRowIndex;
var bDragMode ;
//Drag对象
var objDragItem ;
//触发事件的变量
var el;
function window.onload(){
initAdditionalElements();
}
function initAdditionalElements(){
objDragItem = document.createElement("DIV");
with(objDragItem.style){
backgroundColor = "buttonshadow";
cursor = "default";
position = "absolute";
filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)";
zIndex = 3001;
display ="none";
}
//再次承认js很强大，本人好自卑啊，总是要查文档，将刚创建的objDragItem对象加到body后
window.document.body.insertAdjacentElement("afterBegin", objDragItem);
}
function mousedown(){
el = window.event.srcElement;
if(el==null||el.tagName!="TD") return false;
//alert(el.innerHTML);
if( el.parentNode.rowIndex<2) return false;
//srcRowIndex = el.parentElement;
srcRowIndex = el;
bDragMode = true ;
if (objDragItem!=null){
with(objDragItem){
innerHTML = el.innerHTML;
style.height = el.offsetHeight;
style.width = el.offsetWidth;
}
}
el.setCapture();
}
function mouseup(){
if(el==null ||el.tagName !="TD" || el.parentNode.rowIndex<2) {
alert("不能拖动到非TD元素");
objDragItem.style.display ="none";
bDragMode = false ;
return false;
}
if(srcRowIndex == el) {
alert("不能拖动到自身");
objDragItem.style.display ="none";
bDragMode = false ;
return false;
}
//targetRowIndex = el.parentElement;
targetRowIndex = el;
srcRowIndex.swapNode(targetRowIndex);
bDragMode = false ;
objDragItem.style.display ="none";
}
function mousemove(){
el = window.event.srcElement;
if(el==null||el.tagName!="TD") return false;
//alert(el.tagName);
//取消事件冒泡
window.event.cancelBubble = false;
//left
cliX = window.event.clientX;
//top
cliY = window.event.clientY;
if(bDragMode && objDragItem!=null){
with(objDragItem){
style.display ="";
style.posLeft = cliX +1;
style.posTop = cliY - offsetHeight/2;
}
}
}
</script>
分享到：
相关推荐
原生JavaScript实现的拖拽功能能够为用户带来直观、便捷的操作体验。在这个特定的场景中，我们关注的是如何使用JavaScript来实现拖拽改变HTML表格（table）的行高。标题提到的“原生javascript实现拖拽改变table表格...
为了实现拖动功能，我们需要在拖动开始、拖动中以及拖动结束时分别进行处理： 1. **拖动开始**：当用户开始拖动列头时，记录当前被拖动列的位置和鼠标起始位置。Vue 提供了事件修饰符 `.stop` 和 `.prevent` 可以...
- `bootstrap-table-colresize.min.js`：拖动列宽插件的 JavaScript 文件，实现拖动功能。 - 示例 HTML 文件：展示如何在实际代码中应用以上设置和插件。 - 示例数据文件：可能包含用于填充表格的数据。 总之，实现...
2. **引入拖动列宽的扩展**：BootstrapTable 默认可能并不包含拖动列宽的功能，所以你需要额外引入 `bootstrap-table-draggable.js` 这个扩展文件。这个文件提供了实现列宽拖动的逻辑。确保在页面中正确加载这个文件...
在Vue.js应用中，实现`el-table`组件的拖拽排序功能可以借助第三方库`sortablejs`。`sortablejs`是一个轻量级的JavaScript库，它允许用户通过鼠标或触摸事件对HTML元素进行拖放排序。以下是使用`sortablejs`在Vue中...
本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中，通过拖动表头来任意调整列宽度的功能，这个功能适用于各种列表页面，如数据展示、报表分析等场景。 首先，我们需要引入jQuery库，它是...
在实际开发中，我们经常需要实现表格列的拖拽功能，以方便用户根据需求自定义列的顺序。这个压缩包文件提供的代码示例就是关于如何在 ElementUI 的 Table 组件中实现这一功能的。 首先，我们要理解 ElementUI 的 ...
原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并...
接下来，在表格元素中添加必要的数据属性以启用拖拽功能： ```html <table id="table" data-toggle="table" data-reorderable-rows="true"> <!-- 表格列定义 --> </table> ``` 这里，`data-reorderable-rows=...
"table实现列宽的拖动效果"是一个常见的需求，特别是在数据展示或者数据分析的应用中，用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...
"table 列可左右拖动"的功能使得用户可以根据需要调整列宽，提高用户体验，特别是当表格内容较多，需要横向滚动条时，用户可以更方便地查看和操作表格。 实现这一功能通常涉及以下几个关键知识点： 1. **...
这个JavaScript库提供了一种简单的方式来处理表格行的拖拽事件，当用户拖动表格行时，库会捕获这些事件并更新表格的DOM结构，以反映出行的新顺序。TableDnD库还提供了回调函数，可以在拖放操作开始、结束或过程中...
"实现table表格可按行拖拽，按列排序，并可以保存排序后的结果"是一个常见的需求，尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
"bootstraptable-reorder-columns" 是这个库的一个扩展插件，专门用于实现表格列的拖拽排序功能。用户可以通过简单的拖放操作来调整表格列的顺序，极大地提高了用户在查看和管理大量数据时的灵活性和便利性。 在Web...
在“bootstrap-table拖拽表格改变列宽”这个主题中，我们将深入探讨如何实现用户可以动态调整表格列宽的功能，同时确保兼容主流浏览器，并保持表格的body部分与header部分对齐。 首先，我们需要引入必要的CSS和JS库...
JS插件在实现这样的功能上发挥了重要作用，它们通常封装了复杂的逻辑，提供简单的API供开发者调用。在给定的文件“表格设计器拖动单元格改变列宽或行高(JS插件)”中，可能包含了实现这个功能的源代码和示例。使用这...
总的来说，实现Bootstrap Table行数据的拖拽功能需要结合HTML、CSS、JavaScript和可能的服务器端交互。通过理解和利用jQuery UI的拖放功能，可以为Bootstrap Table增添动态数据管理的能力，提升用户的交互体验。
在JavaScript编程中，实现鼠标拖动选择功能是一项常见的需求，特别是在网页交互设计中。这个功能可以让用户通过鼠标拖动来选取一个矩形区域内的元素，比如在文本编辑器中选择文字，或者在图像编辑工具中选取部分图像...
"table拖动交换表格内容"是一个常见的功能需求，尤其适用于数据管理和展示场景，比如电子表格应用或数据分析工具。这个功能允许用户通过拖动单元格来交换表格同一行内不同列的数据，极大地提高了数据操作的便捷性和...