通过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>
分享到:
相关推荐
拖拽改变列宽的功能网上很多,但是拖拽改变行高的我搜了很久,也没有发现可以用的。所以利用原有改变行高的模版,自己写了一个原生javascrript改变列宽的模版。
vue 使用 sortable 实现 el-table 拖拽排序功能 本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示: npm 下载: npm install sortablejs --save 引入: import Sortable from ...
原创亲测至少节约小白两天时间,本人前端小白搞了好几天才实现表格拖动排序。在网上找的(vue3+sortable.js根本跑不起来)网上好多例子在vue3下根据跑不起来于是,也没有对表格排序的例子。Vuedraggable 是基于并...
vue-easytable表格老版本有表格列宽拖功能,但是最新版插件反而不存在该功能,但是大部分表格数据存在...若将ve-table封装以组件形式引用,可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
js实现像excel表格锁定功能,拖动滚动条指定锁住的列不滚动,内容使用的是table表格 使用代码: var Options = { table : "tb", width : 600, height : 300, rows : 1, cells : 2 } new Fixed(Options);
项目开发中需要用到一个拖动交换表格的功能,上网搜到雅虎的一个控件,结果简单的一个拖动交换行,就要引入七八个js library,太麻烦了。就自己综合网上资源写了一个可兼容IE,firefox,Chrome,Safari和Opera等主流...
NULL 博文链接:https://zhao103804.iteye.com/blog/797436
bootstrap-table-reorder-columns表格拖拽排序列的一个插件 验证有效, 需放在服务器【tomcat】、【apache】、【nginx】或 【HBuilder】中调试运行即可看到真实效果
本javascript软件主要功能是任意拖动html的table的td来整行交换位置。
主要介绍了Vue实现table上下移动功能,结合实例形式分析了vue.js针对table表格元素动态操作相关实现技巧,需要的朋友可以参考下
该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载。 实现效果 实现后的效果如图所示: html主要代码 <draggable ...
1、vue项目中的表格需要实现行拖拽功能 2、表格使用element组件库中el-table 方案介绍 Sortable.js 介绍:Sortable.js是一款轻量级的拖放排序列表的js插件 引用自官方文档:No jQuery required. Supports Meteor, ...
内容索引:脚本资源,Ajax/JavaScript,表格拖动,表格排序 利用JavaScript实现对表格列的排序,并可以用鼠标拖动列宽,以显示出被遮挡的内容,源代码用到两个JS代码类,可移植操作,重用率高。
ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发。本文先从基本概念入手,给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考...
element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现,先来看一下动态图,效果是不是你们想要的。 首先需要安装Sortable.js npm install sortablejs --save 然后引用 import ...
Canvas中可自定义的小型快速表实现,带有字符串截断支持。 同时支持浏览器和 演示版 屏幕截图 安装 npm i canvas-table 用法 在NodeJS中的用法 import { CanvasTable , CTConfig } from "canvas-table" ; import { ...
给 layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档: 国内下载地址: 扩展功能 表头筛选、自定义条件(支持前端筛选、后台筛选介绍请...tableFilter.js 表头筛选 excel.js excel导出 tableChild.js 子表
HTML 实现行、列冻结功能,使用了javascript、jquery 的方式实现了类似excel冻结的功能。
支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现 最新版本下载主页: http://sourceforge.net/projects/tabletree4j/files/ 百度...
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...