`

javascript实现Table列的拖动

JavaScriptMicrosoftCSSJ#HTML 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<TABLE border="1" align="center" width="750" id="table">
<TR>
    <TD>Number</TD>
    <TD>Name</TD>
    <TD>Sex</TD>
    <TD>Age</TD>
    <TD>Nationality</TD>
</TR>
<TR>
    <TD>001</TD>
    <TD>Lucy</TD>
    <TD>Female</TD>
    <TD>22</TD>
    <TD>American</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<style type="text/css">
.temp {
        background-color:buttonshadow;
        cursor:default;
        position:absolute;
        filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
        opacity:0.5;
        zIndex:3001;
        display:none;
}
.dragtemp {
        background-color:buttonshadow;
        cursor:default;
        position:absolute;
        filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
        opacity:0.5;
        zIndex:3001;
}
</style>
<script type="text/javascript">
var Util = new Object;
var _table;
var _row;
var _column = new Array();
var _fromIndex = -1;
var _toIndex = -1;
var _canDragFromIndex = 0;
var _tempDragTarget;
var _fromDragTarget;
var    _toDropTarget;
var _isDrag = false;
var whenCanDropToTargStyle = "_toDropTarget.style.borderLeft = 'thin solid #00FFFF'";
var whenCannotDropToTargStyle = "_toDropTarget.style.borderLeft = '1'";
Util.addEventHandler = function (oTarget, sEventType, fnHandler) {
   
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
};
Util.removeEventHandler = function (oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = null;
    }
};
Util.getPos = function(elem) {
    var pos = new Object();
   
    pos.left = elem.offsetLeft;
    pos.top = elem.offsetTop;
   
    while(elem = elem.offsetParent) {
        pos.left += elem.offsetLeft;
        pos.top += elem.offsetTop;
    }
    pos.left += document.body.scrollLeft;
    pos.top += document.body.scrollTop;
    return pos;
};

Util.formatEvent = function (oEvent) {

    if (typeof oEvent.charCode == "undefined") {
        oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
        oEvent.isChar = (oEvent.charCode > 0);
    }
   
    if (oEvent.srcElement && !oEvent.target) {
        oEvent.eventPhase = 2;
        oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft;
        oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop;
        if (!oEvent.preventDefault) {
                oEvent.preventDefault = function () {
                    this.returnValue = false;
                };
        }

        if (oEvent.type == "mouseout") {
            oEvent.relatedTarget = oEvent.toElement;
        } else if (oEvent.type == "mouseover") {
            oEvent.relatedTarget = oEvent.fromElement;
        }

        if (!oEvent.stopPropagation) {
                oEvent.stopPropagation = function () {
                    this.cancelBubble = true;
                };
        }
        if ( typeof oEvent.button == " undefined " ) {
            oEvent.button = oEvent.which;
        }
        oEvent.target = oEvent.srcElement;
        oEvent.time = (new Date).getTime();
   
    }
   
    return oEvent;
};

Util.getEvent = function() {
    if (window.event) {
        return this.formatEvent(window.event);
    } else {
        return Util.getEvent.caller.arguments[0];
    }
};

function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
} else {
    parent.insertBefore(newElement,targetElement.nextSibling);
}
};
function initTempTag() {
    _tempDragTarget = document.createElement("DIV");   
    _tempDragTarget.className = "temp";
    if(window.document.body) {
        window.document.body.insertBefore(_tempDragTarget,window.document.body.firstChild);
    }
};
function setTempDragTarget(elem) {
    _tempDragTarget.innerHTML = elem.innerHTML;
    _tempDragTarget.className = "dragtemp";
    _tempDragTarget.style.height= elem.style.height;
    _tempDragTarget.style.width = elem.style.width;   
};
function handleMouseDown(elem) {   
    _isDrag = true;
    setTempDragTarget(elem);
    _fromDragTarget = elem;
    _toDropTarget = elem;
    _fromIndex = elem.cellIndex;
    _toIndex = elem.cellIndex;
    eval(whenCanDropToTargStyle);
    Util.addEventHandler(window.document.body,"mousemove",handleMouseMove);
    Util.addEventHandler(window.document.body,"mouseup",handleBodyMouseUp);
};

function handleBodyMouseUp() {
    if(_isDrag){ _isDrag = false;}
    _isDrag = false;
    Util.removeEventHandler(window.document.body,"mousemove",handleMouseMove);
    Util.removeEventHandler(window.document.body,"mouseup",handleBodyMouseUp);
    _tempDragTarget.style.display = "none";
    if(_toDropTarget) {
        if(eval(whenCannotDropToTargStyle)) {
            eval(whenCannotDropToTargStyle);
        }
        _fromIndex = -1;
        _toIndex = -1;
        _toDropTarget = null;
    }
};

function handleMouseUp(elem) {
    if(!_isDrag) {
        return false;
    }
    _isDrag = false;
    Util.removeEventHandler(window.document.body,"mousemove",handleMouseMove);
    Util.removeEventHandler(window.document.body,"mouseup",handleBodyMouseUp);
    _tempDragTarget.style.display = "none";
    if(_toDropTarget) {
        if(eval(whenCannotDropToTargStyle)) {
            eval(whenCannotDropToTargStyle);
        }
        moveTargetTo();
        _fromIndex = -1;
        _toIndex = -1;
        _toDropTarget = null;
    }
};

function handleMouseOver(elem) {   
    if(!_isDrag) { return false; }
    _toIndex = elem.cellIndex;
    _toDropTarget = _rows.cells[elem.cellIndex];
    if(_isDrag) eval(whenCanDropToTargStyle);
};

function handleMouseOut() {
    if(!_toDropTarget) { return false; }   
    eval(whenCannotDropToTargStyle);
    _toIndex = -1;
    _toDropTarget = null;
};

function handleMouseMove(oEvent) {
    oEvent = Util.getEvent(oEvent);
    if(oEvent.type.indexOf("mousemove") == -1 ) {
        Util.removeEventHandler(window.document.body,"mousemove",handleMouseMove);
        Util.removeEventHandler(window.document.body,"mouseup",handleBodyMouseUp);
        return false;
    }
    var x = oEvent.pageX + 10;
    var    y = oEvent.pageY + 10;
    with(_tempDragTarget.style) {
        left = x + "px";
        top = y + "px";
        display = "";
    }   
};
function moveTargetTo() {
    for (var i=0;i<_table.tBodies[ 0 ].rows.length;i++ ) {
        var row = _table.tBodies[0].rows[i];
        var fTag = row.cells[_fromIndex];
        var tTag = row.cells[_toIndex];
        row.insertBefore(fTag,tTag);
    }
};
function initDrag(headTable) {
    initTempTag();
    _table= document.getElementById(headTable);
    _rows = _table.tBodies[ 0 ].rows[ 0 ];
    initTableHandle();
};

function initTableHandle() {
    // alert(_table.tBodies[0].rows[0].cells.length);
    _table.onselectstart = function() { return false;}
    for (var i=0;i<_table.tBodies[0].rows[0].cells.length;i++) {
        var cell = _table.tBodies[0].rows[0].cells[i];
        cell.onmousedown = function() {           
            handleMouseDown(this);
        }
    }
    for(var i=0;i<_table.tBodies[0].rows.length;i++) {
        var cells = _table.tBodies[0].rows[i].cells;
        for(var j=_canDragFromIndex;j<cells.length;j++) {
            var cell = cells[j];
            cell.onmouseover = function () {
                handleMouseOver(this);
            }
            cell.onmouseout = function () {
                handleMouseOut();
            }
            cell.onmouseup = function () {
                handleMouseUp(this);
            }
        }
    }
};
window.onload = function (){
    initDrag("table");
}
</script>

分享到：
| ExtJS中FormPanel实现数据加载和提交
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    vue Element ui实现table列拖动效果

    在以上代码中，我们通过 `mounted` 生命周期钩子初始化 SortableJS，并在拖动结束后调用 `handleColumnDragEnd` 方法更新 `columns` 数据，从而实现表格列的拖动效果。 需要注意的是，实际项目中可能需要考虑更多...

    elementui table列的拖拽功能

    ElementUI 是一个基于 Vue.js 的开源 UI ...总之，实现 ElementUI Table 列的拖拽功能需要对 Vue 的响应式系统和 HTML5 拖放API有深入理解。通过结合这两者，我们可以创建出动态且用户友好的界面，提供更佳的交互体验。

    table 列可左右拖动

    "table 列可左右拖动"的功能使得用户可以根据需要调整列宽，提高用户体验，特别是当表格内容较多，需要横向滚动条时，用户可以更方便地查看和操作表格。 实现这一功能通常涉及以下几个关键知识点： 1. **...

    原生javascript实现拖拽改变table表格行高（html）

    标题提到的“原生javascript实现拖拽改变table表格行高”是一项技术挑战，因为大部分在线资源都集中在改变列宽上，而对行高的调整相对较少。 首先，我们需要理解HTML表格的基本结构。表格由`&lt;table&gt;`元素定义，内部...

    bootstrapTable实现列宽可拖动

    "bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题，让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能，首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...

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

    "实现table表格可按行拖拽，按列排序，并可以保存排序后的结果"是一个常见的需求，尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...

    实现bootstrap table可设置列宽和可拖动列宽

    - `bootstrap-table-colresize.min.js`：拖动列宽插件的 JavaScript 文件，实现拖动功能。 - 示例 HTML 文件：展示如何在实际代码中应用以上设置和插件。 - 示例数据文件：可能包含用于填充表格的数据。 总之，实现...

    table实现列宽的拖动效果

    "table实现列宽的拖动效果"是一个常见的需求，特别是在数据展示或者数据分析的应用中，用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...

    table列排序、列拖动、列宽度变化、行交换

    "table列排序、列拖动、列宽度变化、行交换"这些功能是网页数据展示中常见的需求，能够极大地提升用户操作的便捷性和数据管理的有效性。下面我们将详细探讨这些知识点。 首先，**表头列排序**是一种常见于数据表格...

    vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现

    vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。

    【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx

    在Vue.js应用中，实现`el-table`组件的拖拽排序功能可以借助第三方库`sortablejs`。`sortablejs`是一个轻量级的JavaScript库，它允许用户通过鼠标或触摸事件对HTML元素进行拖放排序。以下是使用`sortablejs`在Vue中...

    bootstraptable-reorder-columns表格拖拽排序列

    BootstrapTable 提供的拖拽列排序特性使得用户可以根据自己的需求快速定制视图，而无需开发者编写大量的定制代码。这个功能尤其适用于那些需要频繁调整列显示顺序的应用场景，例如数据分析工具或管理面板。 要实现...

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中，通过拖动表头来任意调整列宽度的功能，这个功能适用于各种列表页面，如数据展示、报表分析等场景。 首先，我们需要引入jQuery库，它是...

    Jquery 实现列的拖动 jquery grid

    本文将详细讲解如何利用jQuery实现网格（Grid）中的列拖动功能，以及如何展示和压缩内容，以达到类似Excel的效果。 首先，我们需要引入jQuery库和jQuery Grid插件的相关文件。jQuery Grid通常基于jQuery UI，因此...

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

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

    table表格拖动列

    在"table表格拖动列"这个功能中，JavaScript主要负责监听用户的鼠标事件，如鼠标按下、移动和释放，来实现列的拖动行为。当用户点击并拖动表格的列头时，JavaScript会捕获这一动作，并记录下当前列的位置信息。 ...

    鼠标拖动调整table列宽实例

    这个实例利用JavaScript实现，允许用户通过简单的鼠标操作来动态调整表格列的宽度，从而更好地查看和理解数据。 JavaScript是一种强大的客户端脚本语言，它在浏览器环境中运行，为网页添加动态功能。在这个实例中，...

    拖动table单元格改变列宽或行高

    本文将深入探讨如何实现“拖动table单元格改变列宽或行高”的功能，以及这一特性在表格设计器中的应用。 首先，我们要理解HTML表格的基本结构。一个HTML表格由`&lt;table&gt;`元素定义，包含多个`&lt;tr&gt;`（行）元素，每个`...

    Bootstrap Table两个table间行数据拖拽

    在“Bootstrap Table两个Table数据之间行数据拖拽”的主题中，我们主要讨论的是如何实现用户可以通过拖放操作在两个Bootstrap表格之间移动行数据，这种功能在数据管理、比较或重新排序场景中非常实用。 首先，我们...

    bootstrap-table.css 表格拖拽排序

    在这个特定的场景中，`bootstrap-table.css`可能包含了拖拽排序的样式规则，如拖动行时的高亮效果、悬浮指示器等，使得交互过程更加直观。 接着，`jquery.tablednd.js`是基于jQuery的TableDnD库，实现了表格行的...

Magicbox
Global site tag (gtag.js) - Google Analytics