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

2008-06-25 03:55:59 319 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

【STM32项目】老人健康跌倒检测系统实现（附教程PCB资料）功能概述跌倒检测倾倒告警，人体角度倾斜至阈值触发蜂鸣报警异常运动，加速度超过正常行动阈值时触发报警心率监测实时检测心率数据血氧监测实时检测采集血氧血压测量血压在线测量红外体温非接触体温采集方案接触式体温采集方案实时定位中科微GPSGT-U12双频GPS北斗 GLONASS IRNSS定位系统 NEMA数据解析可扩展高精度定位方案厘米级屏幕显示数据采集显示告警阈值设置语音提示 1欢迎使用老人智慧监测系统阅读详情

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

...全文

DIY玩家必备：用SSS1623芯片打造高性价比USB麦克风（附完整电路图）本文详细介绍了如何利用SSS1623芯片DIY高性价比USB麦克风，包括元件选型、电路设计、PCB布局及调试技巧。通过完整的电路参考设计和实用建议，帮助电子爱好者打造专业级录音设备，实现免驱动即插即用功能。阅读详情

sxmonsy

.NET社区 62,272 成员 668,968 内容

+ 关注 + 加入社区

切换为时间正序

jiasi498 2010-11-04

打赏
举报

我也想知道

zero8500 2008-06-26

打赏
举报

我也很想知道

关注

skyedge 2008-06-26

打赏
举报

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

顺便问一下，能不能把例子也发我一份啊？56504000@qq.com :>

sxmonsy 2008-06-26

打赏
举报

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

sxmonsy 2008-06-26

打赏
举报

Feiin有没有例子,发我邮箱一份,sxm811229@163.com

Feiin 2008-06-25

打赏
举报

--------------------
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>

Feiin 2008-06-25

打赏
举报

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

}

}
}
};

amandag 2008-06-25

打赏
举报

最简单的是webpart

钛元素 2008-06-25

打赏
举报

是ajax吧

skyedge 2008-06-25

打赏
举报

chinaren怎么了？

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

wpsni 2008-06-25

打赏
举报

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

相关推荐