问下网易博客的那种拖动效果是怎么实现的

[sxmonsy]

如题,希望大家能告诉我下那个是用什么开发的,应该怎么去做.如果有示例最好.

[wpsni]

www.chinaren.com

[skyedge]

chinaren怎么了？

我过段时间也可能要做这个效果，用webpart不太放心。所以打算参考http://www.cctv.com，把里面的js剽出来。哈哈

[钛元素]

是ajax吧

[amandag]

最简单的是webpart

[Feiin]

main.css
-------------
#main
{
TABLE-LAYOUT:fixed; border:1px solid #ccc;
}

#main td
{
VERTICAL-ALIGN: top; WIDTH: 32%
}

.module{
width:100%;
position:relative;
border:1px solid #ccc;
margin-bottom:10px;
}

.module .title{
border-top:5px solid #ccc;
background-color:#f5f5f5;
font-size:13px;
color:#990000;
width:100%;
}

.module .content {
padding:5px;
}

.block {
width:1px; height:1px; position:relative; overflow:hidden;
}

#ghost {
border:2px dashed #990000;
position:absolute;
display:none;
top:0px;
left:0px;
margin-bottom:10px;
}
-------------------------------------------
-drag.js
-----------
if (typeof getElementById!="function") {
var getElementById = function (id) {
if (typeof(id)=="object") return id;
if (document.getElementById(id)) { return document.getElementById(id); }
else { throw new Error(id +" argument error, can not find \"" +id+ "\" element"); }
}
}
// 获取一个element的offset信息，其实就是相对于Body的padding以内的绝对坐标
function getElCoordinate (e) {
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while (e=e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}; return {
top: t,
left: l,
width: w,
height: h,
bottom: t+h,
right: l+w
}
}

var guozili = window.guozili || {};
//整个table布局对象
guozili.dragLayout = function(cfg) {
this.targetId = cfg.targetId;
//推拽完成时的回调函数，可以进行ajax提交
this.onEnd = cfg.onEnd;
this.init.apply(this);
};

guozili.dragLayout.prototype = {
//初始化，读取每列下面的推拽模块div，并且放入dragArray数组中
init : function() { with(this) {
target = getElementById(this.targetId);
rows = target.tBodies[0].rows[0];
column = rows.cells;
this.dragArray = new Array();
var counter = 0;
for (var i = 0; i < column.length; i ++ ) {
var ele = column[i];

for( var j = 0; j < ele.childNodes.length; j ++ ) {
var ele1 = ele.childNodes[j];
if (ele1.tagName == "DIV" && ele1.getAttribute("mid")) {
dragArray[counter] = new guozili.dragModule(ele1, this);
counter++ ;
}
}

}
}
}
};
//拖拽模块div对象
guozili.dragModule = function(ele, parent) {
//对应的div拖拽元素
this.ele = ele;
//父对象，即dragLayout对象
this.parent = parent;
//标题栏，用于鼠标拖拽
this.title = this.ele.childNodes[0];
//计算拖拽element的坐标
this.eleLeft = getElCoordinate(this.ele).left;
this.eleTop = getElCoordinate(this.ele).top;
//记录原先的邻居节点，用来对比是否被移动到新的位置
this.origNextSibling = ele.nextSibling;
this.init.apply(this);
};

guozili.dragModule.prototype = {
init : function() { with(this) {
var _self = this;
// 获取移动的时候那个灰色的虚线框
ghostLayer = getElementById("ghost");
//鼠标按下时推拽开始
title.onmousedown = function (event) {
_self.dragStart(event);
}
title.style.cursor = "move";

}
},
//开始拖拽设定一些位置信息
dragStart: function (evt) { with(this) {
var _self = this;
evt = evt?evt:window.event;

var postion = getElCoordinate(ele)
//鼠标相对于浏览器的位置减去元素的位置
//得出鼠标相对于元素的相对位置，便于拖拽时计算元素的新位置
x = evt.clientX - postion.left;
y = evt.clientY - postion.top;

//绝对位置，top和left就起作用了,就可以推拽了
ele.style.position = "absolute";
ele.style.top = postion.top;
ele.style.left = postion.left;
ele.style.zIndex = 100;

//将那个灰框设定得与正在拖动的对象一样高
ghostLayer.style.position = "relative";
ghostLayer.style.display = "block";
ghostLayer.style.height = postion.height;
ghostLayer.style.width = postion.width;
//把灰框放到这个对象原先的位置上
ele.parentNode.insertBefore(ghostLayer, ele.nextSibling);

//鼠标按下再移动的事件，鼠标移动，元素也跟着走
document.onmousemove = function (event) { _self.drag(event); }
//释放鼠标的事件
document.onmouseup = function (event) { _self.dragEnd(event); }
}
},
//拖拽时实现元素跟鼠标走
drag: function (evt) { with(this) {
var _self = this;
evt = evt?evt:window.event;
//计算元素的新的位置
ele.style.left = evt.clientX - x;
ele.style.top = evt.clientY - y;
ele.style.filter = "alpha(opacity=70)" ;
ele.style.opacity = 0.7 ;
//被拖拽到的新的元素（当然也可以是原来那个）
var found = null;
//最大的距离
var max_distance = 10000;
// 遍历所有的可拖拽的element，寻找离当前鼠标坐标最近的那个可拖拽元素，以便前面插入
for (var i = 0; i < parent.dragArray.length; i++)
{
var dragObj = parent.dragArray[i];
//利用勾股定理计算鼠标到遍历到的这个元素的距离
var distance = Math.sqrt(Math.pow(evt.clientX - dragObj.eleLeft,2) + Math.pow(evt.clientY - dragObj.eleTop, 2));

if (isNaN(distance)){
continue ;
}
//如果更小，记录下这个距离，并将它作为found
if (distance < max_distance) {
max_distance = distance;
found = dragObj;
}

}
//找到落脚点就先把灰框插进去，我们看到的那个灰框停靠的特效
if (found != null && ghostLayer.nextSibling != found.ele) {
found.ele.parentNode.insertBefore(ghostLayer, found.ele);

}
}
},
//鼠标释放时推拽完成
dragEnd: function (evt) { with(this) {
var _self = this;
evt = evt?evt:window.event;

document.onmousemove = null;
document.onmouseup = null;
//把拖拽时的position=absolute和相关的那些style都消除
ele.style.position = "relative";
ele.style.filter = "";
ele.style.opacity = "";
ele.style.zIndex = "";
ele.style.left = "";
ele.style.top = "";
//将灰框隐藏起来
ghostLayer.style.display = "none";

//如果现在的邻居不是原来的邻居了后者邻居就是它本身
if (ghostLayer.nextSibling != origNextSibling && ghostLayer.nextSibling != this.ele) {
//把被拖拽的这个节点插到灰框的前面
ghostLayer.parentNode.insertBefore(ele, ghostLayer.nextSibling);
//从新初始化可推拽元素对象，可以设定它们的新位置，为下面的拖拽操作做准备
parent.dragArray = null;
parent.init();
//回调函数，拖拽完成可对dragArray进行处理
parent.onEnd.call(this, parent.dragArray);

}


}
}
};

[Feiin]

--------------------
drag.htm
---------------------
<!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>博客推拽布局示例</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="drag.js" language="javascript"></script>
</head>
<body>
<div id="modules">
<table id="main" cellspacing="10" border="0" width="98%" align="center">
<tr>
<td id="c1">
<div class="module" mid="1">
<div class="title">title1</div>
<div class="content">content1</div>
</div>
<div class="module" mid="4">
<div class="title">title4</div>
<div class="content">content4</div>
</div>
<div style="display:inline" mid="|"><div></div></div>
</td>
<td id="c2" >
<div class="module" mid="2">
<div class="title">title2</div>
<div class="content">content2</div>
</div>
<div style="display:inline" mid="|"><div></div></div>
</td>
<td id="c3" >
<div class="module" mid="3">
<div class="title">title3</div>
<div class="content">content3</div>
</div>
<div style="display:inline" mid="|"><div></div></div>
</td>
</tr>
</table>
<div id="ghost"></div>
</div>
布局顺序为：<span id="order" />
<script>
//实例化一个dragLayout对象
var dragObj = new guozili.dragLayout({
targetId: "main",
//dragArray为拖拽完后新的dragModule对象
onEnd: function(dragArray) {
var order = "";
for(var i in dragArray)
{
order += dragArray[i].ele.getAttribute("mid") + " ";
}

getElementById("order").innerText = order;
//或者进行ajax提交
}

});

</script>
</body>
</html>

[sxmonsy]

Feiin有没有例子,发我邮箱一份,[e-mail]

[sxmonsy]

还有我现在找到了一个推拽的例子,现在我想保存和读取当前拖动之后的状态应该怎么做.
就是在我拖动完后,下回再打开还是拖动完的样子.

[skyedge]

用 xmlHttpRequest 把信息提交到服务器就行啊。

顺便问一下，能不能把例子也发我一份啊？[e-mail] :>

[zero8500]

我也很想知道

关注

[jiasi498]

我也想知道