JAVASCRIPT+DHTML实现表格拖动

最新推荐文章于 2024-07-11 18:00:32 发布
最新推荐文章于 2024-07-11 18:00:32 发布
阅读量2.8k 收藏
点赞数
分类专栏： JavaScript&DHTML 文章标签： javascript class function input generator null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hunkdong/article/details/451169
版权

本文系作者原创,如要转贴,请保留以下信息:

http://blog.csdn.net/hunkdong/archive/2005/08/11/451169.aspx

 

自已做的,本来想在网上找前辈们做的,可是总找不到这种例子,要么找出来的太复杂,

要么就没法用,索性自己写了一个.看看还可以用!贡献出来,估计和我一样的菜鸟用的着!

 

代码如下:

<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:#e 8f 8d0;

    }

    .odd{

        background:#f8fcf0;

    }

    .header{

        background:a0dc40;

        color:003300;

    }

 </style>

<head>

    <TITLE>JAVASCRIPT+DHTML实现表格拖动DEMO</TITLE>

    < META NAME="Generator" CONTENT="EditPlus">

    < META NAME="Author" CONTENT="Hunk Dong">

</head>

<body>

<br>

JAVASCRIPT+DHTML实现表格拖动 按住&nbsp;<b>列1</b>&nbsp;即可拖动

<hr width="30%" align="left">

<table class="lsitTalbe" border="1" cellspacing="1" cellpadding="1" οnmοusedοwn="mousedown()"   οnmοuseup="mouseup()"   οnmοusemοve="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 ><INPUT class=inputStyle id=chkTaskItem_3 type=checkbox value=3 name=chkTaskItem></TD>

        <TD ><INPUT class=inputStyle id=txtTaskName_3 type=txtTaskName  size=25 name=txtTaskName value="test1"></TD>

        <TD >test1</TD>    

    </tr>

   

     <tr class="odd" id="tr_2"> 

        <TD style="cursor:move" title="按住可拖动">2</TD>

        <TD ><INPUT class=inputStyle id=chkTaskItem4 type=checkbox value=4 name=chkTaskItem></TD>

        <TD ><INPUT class=inputStyle id=txtTaskName_4 type=txtTaskName  size=25 name=txtTaskName value="test2"></TD>

        <TD >test2</TD>      

    </tr>

 

     <tr class="even" id="tr_3">

      

        <TD style="cursor:move" title="按住可拖动">3</TD>

         <TD ><INPUT class=inputStyle id=chkTaskItem_5 type=checkbox value=5 name=chkTaskItem></TD>

        <TD ><INPUT class=inputStyle id=txtTaskName_5 type=txtTaskName  size=25 name=txtTaskName value="test3"></TD>

        <TD >test3</TD>  

    </tr>

</table>

</body>

</html>

 

<script language="javaScript">

    var srcRowIndex;

    var targetRowIndex;

    var bDragMode ;

    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";        

        }

        window.document.body.insertAdjacentElement("afterBegin", objDragItem);

    }   

 

 

    function mousedown(){   

        el = window.event.srcElement;

        if(el==null||el.tagName!="TD") return false;     

        if(el.cellIndex!=0 || el.parentNode.rowIndex<2) return false;

       

        srcRowIndex =  el.parentElement;      

 

        bDragMode = true ;       

        if (objDragItem!=null){

            with(objDragItem){

                innerHTML = el.parentElement.innerHTML;

                style.height = el.parentElement.offsetHeight;

                style.width  = el.parentElement.offsetWidth;

            }

        }

        el.setCapture();

    }

   

    function mouseup(){ 

   

        if(el==null || el.cellIndex!=0 || el.parentNode.rowIndex<2) return false;       

       

        targetRowIndex = el.parentElement;

        srcRowIndex.swapNode(targetRowIndex);

 

        bDragMode = false ;

        objDragItem.style.display  ="none";   

    }

 

   function mousemove(){

        el = window.event.srcElement;

       

        window.event.cancelBubble = false;

        cliX = window.event.clientX;

        cliY = window.event.clientY;

        if(bDragMode && objDragItem!=null){

            with(objDragItem){

                style.display  ="";

                style.posLeft = cliX +1;

                style.posTop  = cliY - offsetHeight/2;

            } 

        }

    }

</script>

 

直接Copy下来就可以用,欢迎大家一起讨论: dongpin9685@163.com

hunkdong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
tableDnD完整实现表格行的拖动
07-17
tableDnD完整实现表格行的拖动，并显示数据的变化
用Javascript和DHTML构建的矢量图形库
Chenxinyi's Weblog
04-16 4820
序：在 http://www.sitepoint.com/上看了 Simon 的一篇 BLOG ，引导我去了一个很棒的 Web 开发站点 http://www.walterzorn.com/，并在那里获得了一个仅用 DHTML 和 Javscript 技术开发的一个高性能的矢量图形库 wz_jsgraphics.js （感谢 Walter Zorn 开发了这个图形库），使用它就可以在你的网页
网页中拖动表格
Coolingverse 专栏
06-26 1524
var currentMoveObj = null;     //当前拖动对象var relLeft;     //鼠标按下位置相对对象位置var relTop;function f_mdown(obj){    currentMoveObj = obj;           //当对象被按下时，记录该对象    currentMoveObj.style.position = "absolute"
JAVASCRIPT+DHTML实现表格拖动（固定写法）
msg_java2011的专栏
09-05 569
http://blog.csdn.net/hunkdong/archive/2005/08/11/451169.aspx   自已做的,本来想在网上找前辈们做的,可是总找不到这种例子,要么找出来的太复杂, 要么就没法用,索性自己写了一个.看看还可以用!贡献出来,
javascript+DHTML(2)
wyaspnet的专栏
04-27 442
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm网址不错。javascript + DHTMl 画图（二） ★ 怎样使用这个矢量图形库？1 ．包含这个库 插入下面的代码到你的 html 文件的开头部分（在 和 之间）：  
精通JavaScript+jQuery Part1
07-20
　14.5　XML实现隔行变色的表格　 　第15章　CSS与Ajax的综合应用　 　15.1　Ajax概述　 　15.2　Ajax入门 　15.3　Ajax实例：能够自由拖动布局区域的网页　 第4部分　综合案例篇 　第16章　我的博客　 　16.1　分析...
精通javascript
12-05
• 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象模型方法显示和修改表格内容 • 13.7.htm “相对位置”...
DHTML手册[网页制作完全手册]
08-28
例如，使用JavaScript和CSS可以实现鼠标悬停时元素的变化，或者创建可拖动的界面元素。 6. **浏览器兼容性问题**：由于不同的浏览器可能对DHTML的支持程度不同，开发时需要注意跨浏览器的兼容性。通常，需要使用...
DHTML 手册
08-22
5. **拖放功能**：实现用户可拖动页面元素并放置到指定位置，增加交互性。 **学习DHTML的关键** 掌握DHTML需要深入理解HTML、CSS和JavaScript的基础，了解DOM的结构和操作方法。此外，实践是提升技能的关键，通过...
精通JavaScript
06-27
• 11.8.htm JavaScript实现事件控制器 • 11.9.htm 元素属性综合应用 • 11.10.htm 动态修改表单元素内容 第12章（\第12章） • 12.1.htm Document树的简单例子 • 12.2....
关于web页面表格列拖动的解决方法
wxwdt的专栏
08-12 1794
       在新开发的基于J2ee的应用系统中，客户端页面输出数据用表格是在也普通不过的事了！排序的问题已经解决了，由于原来项目采用的是pb开发的，大家习惯了数据窗口的功能，提出了新的需求，为方便浏览数据，数据列是否可以随意拖动顺序由用户自动排列！    的确，这个问题相对比较困难，我本人从来没有见过这种程序。经过仔细思考，这种情况不能在服务器端处理，用户排列规则无法保存也是不断变化的。于是决定
网页中的table拖拽排序
还是叫我官人吧
03-19 1452
公司需求，后台需要做一个表格拖拽排序的功能。想了想，先在百度上找找插件，看能不能快速点实现，找了几分钟，发现貌似插件都挺重的，后面就想自己结合新的api写写看，于是有了这篇文章： 已下是我在w3c找的资料。w3c上面的资料 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt;...
[html5]表格拖动
haliofwu的专栏
12-18 3474
表格拖动前： 表格拖动后： 实现代码：function dragFromLeft(){ /**从左表拖动一条记录到右表*/ $(".group-wish-list-table, .js-table-container").droppable({ drop: function(event, ui) if (drapingId !== undefined
html语言中移动表格,Html中表格行的拖动
weixin_36239866的博客
05-31 684
表格行拖动window.onload = function(){//绑定事件var addEvent = document.addEventListener ? function(el,type,callback){el.addEventListener( type, callback, !1 );} : function(el,type,callback){el.attachEvent( "on...
原生js表格内容拖拽 FroSro(CSDN)
FroSro的博客
06-21 1685
由于有新的需求，所以我参考了网上的一些资料，自己做了一个拖拽功能的demo，直接上代码。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" c
超级功能表格
gengwei80的专栏
08-11 2601
Power Tablebody{ FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;}input { FONT-SIZE: 9pt; height: 15pt; width:50px; cursor: default;}table{ font-size: 9pt;
JS-Demo1：JavaScript实现表格列拖动
热门推荐
Ely's Blog
05-29 1万+
JS表格列可拖动特效： table{ border-top:solid 1px black; border-left:solid 1px black; font-size:12px; width: 100%; } th{ white-space: nowrap; } th,td{
vue2 实现原生 WebSocket
最新发布
weixin_38797742的博客
07-11 246
原生WebSocket： new WebSocket。
Webkit简介以及工作流程
读心悦
07-10 319
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值