首頁新隨筆新文章聯系

2025年5月

日

一

二

三

四

五

六

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

blog是收集資料并且作為技術交流的平臺，發布一些本人常用資料或開發經驗，希望能和大家一起討論、進步。

訪問統計

留言簿(6)

我參與的團隊

牛虻(0/0)

隨筆檔案(8)

文章分類(149)

新聞分類(1)

鐵血軍事(1)

相冊

收藏夾(21)

友情鏈接

lpj的博客
三生石的博客
中文愛百科
莊陸的博客
狼的博客

我的鏈接

搜索

積分與排名

積分 - 150516
排名 - 413

閱讀排行榜

評論排行榜

拖拽例子(一)

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Freedom</title>
<style type="text/css">
body {
width:100%;
max-height:100%;
padding:0px;
margin:0px;
text-align:center;
}
.cell {
float:left;
clear:right;
}
.row {
clear:both;
}
.r_nbsp {
width:20px;
}
.root {
width:868px;
margin: 0 auto;
}
.root * {
/*次屬性FF的說*/
-moz-user-select:none;
}
.line {
width:202px;
line-height:20px;
height:20px;
overflow:hidden;
font-size:12px;
}
.move {
border:#CCCCCC 1px solid;
width:200px;
height:aotu;
}
.title {
height:24px;
cursor:move;
background:#0080C0;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
line-height:24px;
text-align:center;
}
.content {
border-top:#CCCCCC 1px solid;
height:100px;
background-color:#F7F7F7;
}
.CDrag_temp_div {
border:#CCCCCC 1px dashed;
}
</style>
<script type="text/javascript">
var Class = {
//創建類
create: function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};
var $A = function (a) {
//轉換數組
return a ? Array.apply(null, a) : new Array;
};
var $ = function (id) {
//獲取對象
return document.getElementById(id);
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};
Object.extend(Object, {
addEvent : function (a, b, c, d) {
//添加函數
if (a.attachEvent) a.attachEvent(b[0], c);
else a.addEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
return c;
},
delEvent : function (a, b, c, d) {
if (a.detachEvent) a.detachEvent(b[0], c);
else a.removeEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
return c;
},
reEvent : function () {
//獲取Event
return window.event ? window.event : (function (o) {
do {
o = o.caller;
} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
return o.arguments[0];
})(this.reEvent);
}
});
Function.prototype.bind = function () {
//綁定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};

var Table = Class.create();
Table.prototype = {
initialize : function () {
//初始化
var wc = this;
wc.cols = new Array; //創建列
},
addCols : function (o) {
//添加列
var wc = this, cols = wc.cols, i = cols.length;
return cols[i] = {
id : i, div : o, rows : new Array, //創建行
addRow : wc.addRow, chRow : wc.chRow, inRow : wc.inRow, delRow : wc.delRow
};
},
addRow : function (o) {
//添加行
var wc = this, rows = wc.rows, i = rows.length;
return rows[i] = {
id : i, div : o, cols : wc
};
},
inRow : function (a, b) {
//插入行
var wc = b.cols = this, rows = wc.rows, i;
if (a < rows.length) {
for (i = a ; i < rows.length ; i ++) rows[i].id ++;
rows.splice(a, 0, b);
b.id = a;
return b;
} else {
b.id = rows.length;
return rows[b.id] = b;
}
},
delRow : function (a) {
//刪除列
var wc = this, rows = wc.rows, i, r;
if (a >= rows.length) return;
r = rows[a];
rows.splice(a, 1);
for (i = a ; i < rows.length ; i ++) rows[i].id = i;
return r;
}
};
var CDrag = Class.create();
CDrag.IE = /MSIE/.test(window.navigator.userAgent);
CDrag.prototype = {
initialize : function () {
//初始化成員
var wc = this;
wc.table = new Table; //建立表格對象
wc.iFunc = wc.eFunc = null;
wc.obj = { on : { a : null, b : "" }, row : null, left : 0, top : 0 };
wc.temp = { row : null, div : document.createElement("div") };
wc.temp.div.setAttribute(CDrag.IE ? "className" : "class", "CDrag_temp_div");
wc.temp.div.innerHTML = " ";
},
reMouse : function (a) {
//獲取鼠標位置
var e = Object.reEvent();
return {
x : document.documentElement.scrollLeft + e.clientX,
y : document.documentElement.scrollTop + e.clientY
};
},
rePosition : function (o) {
//獲取元素絕對位置
var $x = $y = 0;
do {
$x += o.offsetLeft;
$y += o.offsetTop;
} while ((o = o.offsetParent) && o.tagName != "BODY");
return { x : $x, y : $y };
},
sMove : function (o) {
//當拖動開始時設置參數
var wc = this;
if (wc.iFunc || wc.eFinc) return;
var mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, div = o.div, position = wc.rePosition(div);
obj.row = o;
obj.on.b = "me";
obj.left = mouse.x - position.x;
obj.top = mouse.y - position.y;
temp.row = document.body.appendChild(div.cloneNode(true)); //復制預拖拽對象
with (temp.row.style) {
//設置復制對象
position = "absolute";
left = mouse.x - obj.left + "px";
top = mouse.y - obj.top + "px";
zIndex = 100;
opacity = "0.3";
filter = "alpha(opacity:30)";
}
with (temp.div.style) {
//設置站位對象
height = div.clientHeight + "px";
width = div.clientWidth + "px";
}

/*div.parentNode.insertBefore(temp.div, div);
div.style.display = "none"; //隱藏預拖拽對象*/
div.parentNode.replaceChild(temp.div, div);
wc.iFunc = Object.addEvent(document, ["onmousemove"], wc.iMove.bind(wc));
wc.eFunc = Object.addEvent(document, ["onmouseup"], wc.eMove.bind(wc));
document.onselectstart = new Function("return false");
},
iMove : function () {
//當鼠標移動時設置參數
var wc = this, cols = wc.table.cols, mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, row = obj.row, div = temp.row,
t_position, t_cols, t_rows, i, j;
with (div.style) {
left = mouse.x - obj.left + "px";
top = mouse.y - obj.top + "px";
}
for (i = 0 ; i < cols.length ; i ++) {
t_cols = cols[i];
t_position = wc.rePosition(t_cols.div);
if (t_position.x < mouse.x && t_position.x + t_cols.div.offsetWidth > mouse.x) {
if (t_cols.rows.length > 0) { //如果此列行數大于0
if (wc.rePosition(t_cols.rows[0].div).y + 20 > mouse.y) {
//如果鼠標位置大于第一行的位置即是最上。。
//向上
obj.on.a = t_cols.rows[0];
obj.on.b = "up";
obj.on.a.div.parentNode.insertBefore(temp.div, obj.on.a.div);
} else if (t_cols.rows.length > 1 && t_cols.rows[0] == row &&
wc.rePosition(t_cols.rows[1].div).y + 20 > mouse.y) {
//如果第一行是拖拽對象而第鼠標大于第二行位置則，沒有動。。
//向上
obj.on.b = "me";
t_cols.rows[1].div.parentNode.insertBefore(temp.div, t_cols.rows[1].div);
} else {
for (j = t_cols.rows.length - 1 ; j > -1 ; j --) {
//重最下行向上查詢
t_rows = t_cols.rows[j];
if (t_rows == obj.row) continue;
if (wc.rePosition(t_rows.div).y < mouse.y) {
//如果鼠標大于這行則在這行下面
if (t_rows.id + 1 < t_cols.rows.length && t_cols.rows[t_rows.id + 1] != obj.row) {
//如果這行有下一行則重這行下一行的上面插入
t_cols.rows[t_rows.id + 1].div.parentNode.
insertBefore(temp.div, t_cols.rows[t_rows.id + 1].div);
obj.on.a = t_rows;
obj.on.b = "down";
} else if (t_rows.id + 2 < t_cols.rows.length) {
//如果這行下一行是拖拽對象則插入到下兩行，即拖拽對象返回原位
t_cols.rows[t_rows.id + 2].div.parentNode.
insertBefore(temp.div, t_cols.rows[t_rows.id + 2].div);
obj.on.b = "me";
} else {
//前面都沒有滿足則放在最低行
t_rows.div.parentNode.appendChild(temp.div);
obj.on.a = t_rows;
obj.on.b = "down";
}
return;
}
}
}
} else {
//此列無內容添加新行
t_cols.div.appendChild(temp.div);
obj.on.a = t_cols;
obj.on.b = "new";
}
}
}
},
eMove : function () {
//當鼠標釋放時設置參數
var wc = this, obj = wc.obj, temp = wc.temp, row = obj.row, div = row.div, o_cols, n_cols;
if (obj.on.b == "up") {
//向最上添加
o_cols = obj.row.cols;
n_cols = obj.on.a.cols;
n_cols.inRow(0, o_cols.delRow(obj.row.id));
} else if (obj.on.b == "down") {
//相對向下添加
o_cols = obj.row.cols;
n_cols = obj.on.a.cols;
n_cols.inRow(obj.on.a.id + 1, o_cols.delRow(obj.row.id));
} else if (obj.on.b == "new") {
//向無內容列添加
o_cols = obj.row.cols;
n_cols = obj.on.a;
n_cols.inRow(0, o_cols.delRow(obj.row.id));
}
temp.div.parentNode.replaceChild(div, temp.div);
temp.row.parentNode.removeChild(temp.row);
delete temp.row;
Object.delEvent(document, ["onmousemove"], wc.iFunc);
Object.delEvent(document, ["onmouseup"], wc.eFunc);
document.onselectstart = wc.iFunc = wc.eFunc = null;
},
add : function (o) {
//添加對象
var wc = this;
Object.addEvent(o.div.childNodes[CDrag.IE ? 0 : 1], ["onmousedown"], wc.sMove.bind(wc, o));
},
parse : function (o) {
//初始化成員
var wc = this, table = wc.table, cols, i, j;
for (i = 0 ; i < o.length ; i ++) {
cols = table.addCols(o[i].cols);
for (j = 0 ; j < o[i].rows.length ; j ++)
wc.add(cols.addRow(o[i].rows[j]));
}
}
};
Object.addEvent(window, ["onload"], function () {
var wc = new CDrag;
wc.parse([
{
cols : $("m_1"), rows : [$("m_1_1"), $("m_1_2"), $("m_1_3"), $("m_1_4")]
},
{
cols : $("m_2"), rows : [$("m_2_1"), $("m_2_2"), $("m_2_3"), $("m_2_4")]
},
{
cols : $("m_3"), rows : [$("m_3_1"), $("m_3_2"), $("m_3_3"), $("m_3_4")]
},
{
cols : $("m_4"), rows : [$("m_4_1"), $("m_4_2"), $("m_4_3"), $("m_4_4")]
}
]);
});
</script>
</head><body><br />
<div class="root">
<div class="cell" id="m_1">
<div class="line">
第一列</div>
<div class="move" id="m_1_1">
<div class="title">
第一列的第一個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_1_2">
<div class="title">
第一列的第二個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_1_3">
<div class="title">
第一列的第三個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_1_4">
<div class="title">
第一列的第四個的說</div>
<div class="content">
</div>
</div>
</div>
<div class="cell r_nbsp">
</div>
<div class="cell" id="m_2">
<div class="line">
第二列</div>
<div class="move" id="m_2_1">
<div class="title">
第二列的第一個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_2_2">
<div class="title">
第二列的第二個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_2_3">
<div class="title">
第二列的第三個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_2_4">
<div class="title">
第二列的第四個的說</div>
<div class="content">
</div>
</div>
</div>
<div class="cell r_nbsp">
</div>
<div class="cell" id="m_3">
<div class="line">
第三列</div>
<div class="move" id="m_3_1">
<div class="title">
第三列的第一個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_3_2">
<div class="title">
第三列的第二個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_3_3">
<div class="title">
第三列的第三個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_3_4">
<div class="title">
第三列的第四個的說</div>
<div class="content">
</div>
</div>
</div>
<div class="cell r_nbsp">
</div>
<div class="cell" id="m_4">
<div class="line">
第四列</div>
<div class="move" id="m_4_1">
<div class="title">
第四列的第一個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_4_2">
<div class="title">
第四列的第二個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_4_3">
<div class="title">
第四列的第三個的說</div>
<div class="content">
</div>
</div>
<div class="move" id="m_4_4">
<div class="title">
第四列的第四個的說</div>
<div class="content">
</div>
</div>
</div>
</div>
</body></html>

[提示：你可先修改部分代碼，再按運行]

---------------------------------------------------------------------------------------------------------------------------------
說人之短，乃護己之短。夸己之長，乃忌人之長。皆由存心不厚，識量太狹耳。能去此弊，可以進德，可以遠怨。
http://www.aygfsteel.com/szhswl
------------------------------------------------------------------------------------------------------ ----------------- ---------

posted on 2007-12-07 14:23 宋針還閱讀(608) 評論(0) 編輯收藏所屬分類: JAVASCRIPT

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JS屏蔽功能類 javascript table delete row javascript insert table row JQuery技巧總結(轉載) JS實現table里單元格排序模擬QQ菜單效果 js觸發彈出層 javascript框架編程仿MSN效果 FOCUS效果輸入框