js统制行移动
日期：2014-05-16 浏览次数：20452 次
js控制行移动
摘自网络
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>行拖动</title>
<script>
window.onload = function() {
//绑定事件
var addEvent = document.addEventListener ? function(el, type, callback) {
el.addEventListener(type, callback, !1);
}
: function(el, type, callback) {
el.attachEvent("on" + type, callback);
}
//判定对样式的支持
var getStyleName = (function() {
var prefixes = [ '', '-ms-', '-moz-', '-webkit-', '-khtml-', '-o-' ];
var reg_cap = /-([a-z])/g;
function getStyleName(css, el) {
el = el || document.documentElement;
var style = el.style, test;
for ( var i = 0, l = prefixes.length; i < l; i++) {
test = (prefixes[i] + css).replace(reg_cap,
function($0, $1) {
return $1.toUpperCase();
});
if (test in style) {
return test;
}
}
return null;
}
return getStyleName;
})();
var userSelect = getStyleName("user-select");
//精确获取样式
var getStyle = document.defaultView ? function(el, style) {
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 = {
y : 0,
dragStart : function(e) {
e = e || event;
var handler = e.target || e.srcElement;
if (handler.nodeName === "TD") {
handler = handler.parentNode;
dragManager.handler = handler;
if (!handler.getAttribute("data-background")) {
handler.setAttribute("data-background", getStyle(
handler, "background-color"))
}
//显示为可移动的状态
handler.style.backgroundColor = "#ccc";
handler.style.cursor = "move";
dragManager.y = e.clientY;
//★★★★★★★★★★★★★★★★★★★★
if (typeof userSelect === "string") {
return document.documentElement.style[userSelect] = "none";
}
document.unselectable = "on";
document.onselectstart = function() {
return false;
}
//★★★★★★★★★★★★★★★★★★★★
}
},
draging : function(e) {//mousemove时拖动行
var handler = dragManager.handler;
if (handler) {
e = e || event;
var y = e.clientY;
var down = y > dragManager.y;//是否向下移动
var tr = document.elementFromPoint(e.clientX, e.clientY);
if (tr && tr.nodeName == "TD") {
tr = tr.parentNode
dragManager.y = y;
if (handler !== tr) {
tr.parentNode.insertBefore(handler,
(down ? tr.nextSibling : tr));
}
}
;
}
},
dragEnd : function() {
var handler = dragManager.handler
if (handler) {
handler.style.backgroundColor = handler
.getAttribute("data-background");
handler.style.cursor = "default";
dragManager.handler = null;
}
//★★★★★★★★★★★★★★★★★★★★
if (typeof userSelect === "string") {
return document.documentElement.style[userSelect] = "text";
}
document.unselectable = "off";
document.onselectstart = null;
//★★★★★★★★★★★★★★★★★★★★
},
main : function(el) {
addEvent(el, "mousedown", dragManager.dragStart);
addEvent(document, "mousemove", dragManager.draging);
addEvent(document, "mouseup", dragManager.dragEnd);
}
}
var el = document.getElementById("table");
dragManager.main(el);
}
</script>
<style>
.table {
width: 60%;
border: 1px solid green;
border-collapse: collapse;
}
.table td {
border: 1px solid green;
height: 20px;
}
</style>
</head>
<body>
<h1>行拖动</h1>
<table id="table" class="table">
<tbody>
<tr>
<td>1</td>
<td>第一行</td>
</tr>
<tr id="2">
<td class="2">2</td>
<td&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
