如何完善拖动效果

其实这个也挺简单IE Only,注意releaseCapture和setCapture的使用<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Drag </TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD><BODY>
<table width="100" border="1" onselectstart="return false" style="position:absolute;left:50;top:50" onmousedown="Movedown(this)" onmousemove="Move(this)">
<tr>
<td bgcolor="#CCCCCC" align="center" style="cursor:move">托拽1</td>
</tr>
<td align="center" height="60">程序天下</td>
<tr></tr>
</table>    <table width="100" border="1" onselectstart="return false" style="position:absolute;left:350;top:250" onmousedown="Movedown(this)" onmousemove="Move(this)">
<tr>
<td bgcolor="#CCCCCC" align="center" style="cursor:move">托拽2</td>
</tr>
<td align="center" height="60">程序天下</td>
<tr></tr>
</table>
</BODY>
</HTML>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Freedom</title><style type="text/css">
html, body {
width:100%;
max-height:100%;
padding:0px;
margin:0px;
}body {
text-align:center;
font-size:14px;
}.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;
height:0px;
overflow:hidden;
}.move {
border:#CCCCCC 1px solid;
width:200px;
height:aotu;
margin-top:5px;
margin-bottom:5px;
}.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;
margin-top:5px;
margin-bottom:5px;
}a#DEL_CDrag {
color:#6699CC;
text-decoration:none;
}a#DEL_CDrag:hover {
color:#FF0000;
}
</style><script type="text/javascript">

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));
/*for (i = 0 ; i < n_cols.rows.length ; i ++) {
alert(n_cols.rows[i].div.childNodes[0].innerHTML);
}*/
} 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));
}

if (obj.on.b != "me") wc.set_cookie();

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

set_cookie : function () {
//设置COOKIE
var wc = this, cols = wc.table.cols, date = new Date, a = [], b = [], i, j, r;
date.setDate(date.getDate() + 1);
for (i = 0 ; i < cols.length ; i ++) {
for (r = cols[i].rows, j = 0 ; j < r.length ; j ++) b[b.length] = "'" + r[j].div.id + "'";
a[a.length] = "cols:'" + cols[i].div.id + "',rows:[" + b.splice(0, b.length).join(",") + "]";
}
document.cookie = "CDrag=" + escape("[{" + a.join("},{") + "}]") + ";expires=" + date.toGMTString();
},

del_cookie : function () {
//删除COOKIE
var date;
if (/(CDrag=[^;]+(?:;|$))/.test(document.cookie)) {
date = new Date;
date.setTime(date.getTime() - 1);
document.cookie = "CDrag=" + RegExp.$1 + ";expires=" + date.toGMTString();
}
},

parse : function (o) {
//初始化成员
try {
var wc = this, table = wc.table, cols, c_div, r_div, i, j;
for (i = 0 ; i < o.length ; i ++) {
c_div = $(o[i].cols), cols = table.addCols(c_div);
for (j = 0 ; j < o[i].rows.length ; j ++) {
r_div = $(o[i].rows[j]), wc.add(cols.addRow(r_div));
c_div.appendChild(r_div);
}
}
} catch (exp) {
wc.del_cookie();
}
}

};Object.addEvent(window, ["onload"], function () {
var wc = new CDrag,

json = /CDrag=([^;]+)(?:;|$)/.test(document.cookie) ? eval('(' + unescape(RegExp.$1) + ')') : [

{
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"]
}

];
wc.parse(json);

$("DEL_CDrag").onclick = (function (wc) {
return function () {
wc.del_cookie();
};
})(wc);
wc = null;
});</script>
</head>
<body>
<br />
<div><a id="DEL_CDrag" href="javascript:void(0);">[清除记录]</a></div>
<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>

你到网上找一个这个jquery和jquery.ui下载一下
然后在页面引用一下<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/ui/jquery.ui.all.js" type="text/javascript"></script>
<script src="../js/ui/ui.draggable.js" type="text/javascript"></script>
    <script  type="text/javascript">        $(document).ready(function() {
            $("#a").draggable();
        })
    </script>
    <div id="a">qweqqweq</div>现在你拖拖看,按不紧也不会掉

<div style="cursor:hand;width:700px;height:500px;position:absolute;height:400px; border:1px solid #a1b8e2">
<div style="border:1px solid #a1b8e2;font-weight:bold;height:28px; background:#a1b8e2">
</div><div style="background:#EBF3FD;border1px solid #a1b8e2;height:470px;">
<div style="border:1px solid #a1b8e2;position:relative;float:left;top:10px;left:8px;height:350px;">
<iframe src="http://www.baidu.com" scrolling="no" frameborder="0" width="680" height="450"></iframe>
</div>
</div>
</div>
冒似用这个当div来实现拖动效果的时候
效果都不是很理想。

调试易

如何完善拖动效果

解决方案 »