很强大的 js拖曳效果-白红宇

很强大的 js拖曳效果

阅读量：7094 次

发布时间：2019-06-28

本文共 10209 字，大约阅读时间需要 34 分钟。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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>

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>

</head>

第一列</div>

第一列的第一个的说</div>

</div>

第一列的第二个的说</div>

</div>

第一列的第三个的说</div>

</div>

第一列的第四个的说</div>

</div>

</div>

第二列</div>

第二列的第一个的说</div>

</div>

第二列的第二个的说</div>

</div>

第二列的第三个的说</div>

</div>

第二列的第四个的说</div>

</div>

</div>

第三列</div>

第三列的第一个的说</div>

</div>

第三列的第二个的说</div>

</div>

第三列的第三个的说</div>

</div>

第三列的第四个的说</div>

</div>

</div>

第四列</div>

第四列的第一个的说</div>

</div>

第四列的第二个的说</div>

</div>

第四列的第三个的说</div>

</div>

第四列的第四个的说</div>

</div>

</body></html>

转载地址：http://efaql.baihongyu.com/

你可能感兴趣的文章

Microsoft Azure Site Recovery (2) 配置虚拟机保护

将1~n个数按照字典序排序 Lexicographical Numbers

Nginx国人开发缩略图模块(ngx_image_thumb)

查看>>

Java NIO原理图文分析及代码实现

查看>>