仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]

仿3721首页模块拖曳移动效果[拖曳层移动层]呵，做了一些细致的处理

html, body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}

body {
text-align:center;
font-size:14px;
}

.cell_left, .cell_right {
width:202px;
}

.cell_center {
width:404px;
}

.left {
float:left;
}

.row {
clear:both;
}

.r_nbsp {
width:20px;
}

.root {
width:876px;
height:auto;
margin:auto;
}

.root * {
/*此属性FF的说*/
-moz-user-select:none;
}

.line {
width:100%px;
height:0px;
overflow:hidden;
}

.move {
border:#CCCCCC 1px solid;
width:100%;
height:aotu;
margin-top:5px;
margin-bottom:5px;
display:none;
}

.title {
height:24px;
line-height:24px;
background:#0080C0;
}

.title_a {
width:auto;
margin-right:80px;
cursor:move;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
text-align:left;
padding-left:10px;
}

.title_reduce, .title_lock, .title_edit, .title_close {
float:right;
width:20px;
font-size:9px;
color:#CCCCCC;
}

.title_reduce, .title_lock, .title_edit {
cursor:pointer;
}

.title_close {
cursor:default;
}

.content {
height:100px;
border-top:#CCCCCC 1px solid;
background-color:#F7F7F7;
font-size:12px;
line-height:130%;
}

.CDrag_temp_div {
border:#CCCCCC 1px dashed;
margin-top:5px;
margin-bottom:5px;
}

a#DEL_CDrag, a#ADD_CDrag {
color:#6699CC;
text-decoration:none;
}

a#DEL_CDrag:hover, a#ADD_CDrag:hover {
color:#FF0000;
}

.Dall_screen, .Iall_screen {
position:absolute;
left:0px;
top:0px;
}

.Dall_screen {
z-index:99;
background-color:#000000;
filter:alpha(opacity=30);
opacity:0.3;
}

.Iall_screen {
z-index:98;
filter:alpha(opacity=0);
opacity:0;
}

.Nall_screen {
position:absolute;
z-index:100;
left:300px;
top:100px;
width:300px;
height:auto;
border:#6699CC 1px solid;
background-color:#F0FAFF;
padding:10px 0 10px 0;
}

.Call_screen {
width:100%;
height:auto;
line-height:30px;
font-size:12px;
padding-bottom:10px;
}

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);
};

var Try = {
//检测异常
these : function () {
var returnValue, arg = arguments, lambda, i;

for (i = 0 ; i = items.length) return;
for (i = num + 1; i   ', json[i].title, '
'
].join("");

wc.content.innerHTML = boxary.join(""); //写入内容层
},

execute : function (div) {
//处理table类结构
var wc = this, parent = wc.parent, json = wc.json, items = div.getElementsByTagName("input"), row, c, i;

try {

for (i = 0 ; i mouse.x) {
if (t_cols.items.length > 0) { //如果此列行数大于0
if (t_cols.items[0] != obj.row && wc.rePosition(t_cols.items[0].element).y + 20 > mouse.y) {
//如果第一行不为拖拽对象并且鼠标位置大于第一行的位置即是最上。。
//向上
wc.execMove("up", t_cols.items[0], t_cols.items[0], 0);
} else if (t_cols.items.length > 1 && t_cols.items[0] == row &&
wc.rePosition(t_cols.items[1].element).y + 20 > mouse.y) {
//如果第一行是拖拽对象而第鼠标大于第二行位置则，没有动。。
//向上
wc.execMove("me", t_cols.items[1], t_cols.items[1], 0);
} else {
for (j = t_cols.items.length - 1 ; j > -1 ; j --) {
//重最下行向上查询
t_rows = t_cols.items[j];
if (t_rows == obj.row) {
if (t_cols.items.length == 1) {
//如果拖拽的是此列最后一行
wc.execMove("me", t_cols, t_cols, 1);
}
continue;
}
if (wc.rePosition(t_rows.element).y

[清除记录]
  
[添加记录]

关闭

编辑

锁定

缩小

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]