<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>测试拖动Table行</title>
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<a id="text_1"></a>
<h1><a href="#text_2">Hello1</a></h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a id="text_2"></a>
<h1><a href="#text_3">Hello2</a></h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<style>
.table{
width:60%;
border: 1px solid red;
border-collapse: collapse;
}
.table td{
border: 1px solid red;
height: 20px;
}
</style>
<script>
window.onload = function() {
//绑定事件
var addEvent = document.addEventListener ? function (el, type, callback) {
//W3C
//第3个参数用来设置事件是在事件捕获时执行，还是事件冒泡时执行;
//true=捕获时执行 false=冒泡时执行
//为了与 IE 统一，都在冒泡时执行
el.addEventListener(type, callback, false);
} : function (el, type, callback) {
//IE
//attachEvent()方法没有相关设置，默认是在事件冒泡时执行的.
el.attachEvent("on" + type, callback);
};
//移除事件
var removeEvent = document.removeEventListener ? function (el, type, callback) {
//W3C
el.removeEventListener(type, callback);
} : function (el, type, callback) {
//IE
el.detachEvent("on" + type, callback);
};
//精确获取样式
var getStyle = document.defaultView ? function (el, style) {
//W3C
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style);
} : function (el, style) {
style = style.replace(/\-(\w)/g, function ($, $1) {
return $1.toUpperCase();
});
return el.currentStyle[style];
};
var dragManager = {
clientY: 0,
draging: function (e) {//mousemove时拖动行
var dragObj = dragManager.dragObj;
if (dragObj) {
e = e || event;
if (window.getSelection()) {
//W3C
window.getSelection().removeAllRanges();
} else if (document.selection) {
//IE
document.selection.empty();
}
var y = e.clientY;
var down = y > dragManager.clientY;//是否向下移动
var tr = document.elementFromPoint(e.clientX, e.clientY);
if (tr && tr.nodeName == "TD") {
tr = tr.parentNode;
dragManager.clientY = y;
if (dragObj !== tr) {
tr.parentNode.insertBefore(dragObj, (down ? tr.nextSibling : tr));
}
}
}
},
dragStart: function(e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.nodeName == "TD") {
target = target.parentNode;
dragManager.dragObj = target;
if (!target.getAttribute("data-background")) {
var background = getStyle(target, "background-color");
target.setAttribute("data-background", background);
}
//显示为可移动的状态
target.style.backgroundColor = "#ccc";
target.style.cursor = "move";
dragManager.clientY = e.clientY;
addEvent(document, "mousemove", dragManager.draging);
addEvent(document, "mouseup", dragManager.dragEnd);
}
},
dragEnd: function (e) {
var dragObj = dragManager.dragObj;
if (dragObj) {
e = e || event;
var target = e.target || e.srcElement;
if (target.nodeName == "TD") {
target = target.parentNode;
dragObj.style.backgroundColor = dragObj.getAttribute("data-background");
dragObj.style.cursor = "default";
dragManager.dragObj = null;
removeEvent(target, "mouseover", dragManager.draging);
removeEvent(target, "mouseup", dragManager.dragEnd);
setTrBgColor();
}
}
},
main: function (el) {
addEvent(el, "mousedown", dragManager.dragStart);
}
};
//奇偶行的背景色区分
var setTrBgColor = function () {
var table = document.getElementById("table");
var trs = table.getElementsByTagName("tr");
var i = 0, len = trs.length;
for (; i < len; i++) {
if (i % 2 == 1) {
trs[i].style.backgroundColor = "#eee";
} else {
trs[i].style.backgroundColor = "#fff";
}
}
};
setTrBgColor();
var el = document.getElementById("table");
dragManager.main(el);
};
</script>
<h1>表格行拖动</h1>
<table id="table" class="table">
<tbody>
<tr>
<td>1</td>
<td>One</td>
<td>dom.require</td>
</tr>
<tr id="2" >
<td class="2">2</td>
<td>Two</td>
<td>ControlJS </td>
</tr>
<tr id="3" >
<td class="3">3</td>
<td>Three</td>
<td>HeadJS</td>
</tr>
<tr id="4" >
<td class="4">4</td>
<td>Four</td>
<td>LAB.js</td>
</tr>
<tr id="5" >
<td class="5">5</td>
<td>Five</td>
<td>$script.js</td>
</tr>
<tr id="6" >
<td class="6">6</td>
<td>Six</td>
<td>NBL.js</td>
</tr>
</tbody>
</table>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a id="text_3"></a>
<h1><a href="#text_1">Hello3</a></h1>
<A HREF="doc1.html#numbers" TARGET="window2" onmouseover="window.status='Click here to jump to the anchor numbers in doc1.html in window2';return true;">Numbers</A>
<A HREF=""
onMouseOver="window.status='Click this if you dare!'; return true"
onClick="this.href='doc1.html#numbers'">
<B>Click me</B></A>
<label for="name" onmouseover="this.title='Click me to let the input get the focus.'">姓名：</label>
<input id="name">
<dialog id="dialog">Dialog</dialog>
<button onclick="document.getElementById('dialog').show()">点我</button>
<br><br><br>
<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="image">
<input type="month">
<input type="number">
<input type="range">
<input type="search">
<input type="time">
<input type="url">
<input type="week">
</body>
</html>
测试拖动Table行
猜你喜欢
转载自blog.csdn.net/hsl0530hsl/article/details/80213988
今日推荐
周排行