热门源码
|
热门软件
|
高级搜索
|
网站地图
|
文章
·
软件投稿
全站首页
建站资讯
源码下载
站长素材
站长书籍
网页特效
网站编程
网站运营
代码打包
loading...
服务器技术
网站运营
网站编程
数据库应用
数码设计
web安全
ASP源码
PHP源码
JSP源码
.NET源码
CGI源码
其它源码
系统软件
素材模板
精品字体
图标矢量
屏保主题
网页图标
辅助插件
网站制作书籍
操作系统
设计教程
数据库书籍
文学专著
网站运营书籍
页面布局
表单特效
综合技巧
图形特效
文本操作
链接特效
鼠标特效
按钮特效
菜单导航
窗口特效
状态系统
页面特效
ASP编程
PHP编程
XML编程
JSP编程
Javascript
.NET编程
XHTML
HTML
AJAX编程
Ext编程
搜索引擎
建站资讯
网络推广
站长访谈
网赚教程
CMS应用
互联网资讯
幻灯焦点图
技术框架
表单输入
弹出窗口
翻页滚动
图片展示
图标按钮
全屏广告
综合布局
对联广告
菜单导航
在线客服
本站推荐
:
仿Google和Windows Live的拖拽
脚本类别:
综合技巧
添加时间:
2008-04-26
查看次数:
作者:
脚本代码
<HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alpha(opacity=30); } .normal { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#FFFFFF; } .over { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#f3f3f3; filter: alpha(opacity=50); } .dragArea { CURSOR: move; } </style> </HEAD> <BODY oncontextmenu="window.event.returnValue=false"> <div id="dragHelper" style="display:none"></div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td><a href="#">Cobao</a></td><td dragArea="yes" class="dragArea">拖放处</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.cobao.cn</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">拖放处</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.sina.com.cn</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td>网易</td><td dragArea="yes" class="dragArea">拖放处</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.163.com</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> <div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td>QQ</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.qq.com</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table> </div> </BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var dragObjs = []; //可以拖拽的元素数组 var dragObjTops = []; var dragHelper = document.getElementById("dragHelper"); //拖拽时位置框 var dragObj = null; //拖拽对象元素 var dragObjPos = 0; var dragObjOffset = {left:0,top:0}; //拖拽对象原始位置 var mouseInDragObjOffset = {x:0,y:0}; //鼠标在拖拽对象中的相对位置 var initHeight = 40; Number.prototype.NaN0=function(){return isNaN(this)?0:this;} function getPosition(e){ //获取元素相对文档的绝对位置 var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return {x:left, y:top}; } function mouseCoords(ev){ //获取鼠标相对文档的绝对位置 if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } function getMouseOffset(target, ev){ // 获取鼠标相对元素的相对位置 ev = ev || window.event; var elementPos = getPosition(target); var mousePos = mouseCoords(ev); return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y}; } function mouseDown(ev){ ev = ev || window.event; target = ev.srcElement || ev.target; if(dragObj){ return; } var dragArea = false; if(target.getAttribute("dragArea")){ dragArea = true; } while(!target.getAttribute("isDragObj")){ if(target.tagName=="HTML") break; target = target.parentNode; } if(dragArea && target.getAttribute("isDragObj")){ dragObj = target; //重写的目的是让当前对象在最上层 document.body.removeChild(dragObj); document.body.appendChild(dragObj); //记录下拖拽对象原始位置 dragObjOffset.left = dragObj.style.left; dragObjOffset.top = dragObj.style.top; dragObj.className = dragObj.getAttribute("overClass"); //鼠标在拖拽对象中的相对位置 mouseInDragObjOffset = getMouseOffset(dragObj, ev); dragHelper.style.left = dragObj.style.left; dragHelper.style.top = dragObj.style.top; dragHelper.style.width = dragObj.offsetWidth; dragHelper.style.height = dragObj.offsetHeight; dragHelper.style.display = ""; //alert(dragObj.offsetWidth+":"+dragObj.clientWidth); } } function mouseUp(ev){ ev = ev || window.event; target = ev.srcElement || ev.target; if(dragObj){ dragObj.style.left = dragHelper.style.left; dragObj.style.top = dragHelper.style.top; dragHelper.style.display = "none"; dragObj.className = dragObj.getAttribute("dragClass"); dragObj = null; } } function mouseMove(ev){ ev = ev || window.event; if(dragObj) { var mousePos = mouseCoords(ev); /*dragHelper.style.left = dragObjOffset.left; dragHelper.style.top = dragObjOffset.top; dragHelper.style.width = dragObj.offsetWidth; dragHelper.style.height = dragObj.offsetHeight; dragHelper.style.display = "";*/ var windowWidth = document.body.offsetWidth; //窗口宽度 var windowHeight = document.body.offsetHeight; //窗口高度 //拖拽对象应该所在当前位置 var dragObjLeft = mousePos.x - mouseInDragObjOffset.x; var dragObjTop = mousePos.y - mouseInDragObjOffset.y; //增加判断,不然拖拽对象拖出浏览器窗口 if(dragObjLeft >= 0 && dragObjLeft <= windowWidth - dragObj.offsetWidth - 20) dragObj.style.left = dragObjLeft; if(dragObjTop >=0) dragObj.style.top = dragObjTop; repaint(); } } //克隆对象 function cloneObject(srcObj, destObj){ destObj = srcObj.cloneNode(true); } function makeDraggable(element){ element.setAttribute("isDragObj", "y"); } function repaint(){ for(i=0; i<dragObjs.length; i++){ if(dragObjs[i] == dragObj){ dragObjPos = i; dragObjs[i] = dragHelper; break; } } if(dragObjPos>0 && parseInt(dragObj.style.top)<parseInt(dragObjs[dragObjPos-1].style.top)){ dragObjs[dragObjPos] = dragObjs[dragObjPos-1]; dragObjs[dragObjPos-1] = dragHelper; dragObjPos = dragObjPos - 1; } if(dragObjPos<dragObjs.length-1 && parseInt(dragObj.style.top)>parseInt(dragObjs[dragObjPos+1].style.top)){ dragObjs[dragObjPos] = dragObjs[dragObjPos+1]; dragObjs[dragObjPos+1] = dragHelper; dragObjPos = dragObjPos + 1; } paintDragObjs(); dragObjs[dragObjPos] = dragObj; } function paintDragObjs(){ var h = 40; for(i=0; i<dragObjs.length; i++){ dragObjs[i].style.left = 20; dragObjs[i].style.top = h; h += dragObjs[i].offsetHeight + 10; } } function openClose(obj){ obj.innerHTML = obj.innerHTML=="-"?"+":"-"; while(obj.tagName != "TBODY"){ obj = obj.parentNode; } for(i=0; i<obj.childNodes.length; i++){ if(obj.childNodes[i].nodeName == "#text" || obj.childNodes[i].getAttribute("bar")){ continue; } obj.childNodes[i].style.display=obj.childNodes[i].style.display==""?"none":""; } paintDragObjs(); } document.onmousedown = mouseDown; document.onmouseup = mouseUp; document.onmousemove = mouseMove; window.onload = function(){ var objs = document.getElementsByTagName("Div"); for(i=0; i<objs.length; i++){ var item = objs.item(i); //if(i==1)item.style.height=150; if(item.getAttribute("overClass")){ makeDraggable(item); dragObjs.push(item); item.style.left = 20; item.style.top = initHeight; dragObjTops.push(initHeight); initHeight += item.offsetHeight + 10; } } // dragHelper = document.createElement('DIV'); // dragHelper.style.cssText = 'position:absolute;display:none;'; // document.body.appendChild(dragHelper); } //--> </SCRIPT> </HTML>
loading...
当前页面所处路径为
共享世纪
/
网页特效
/
综合技巧
/ ,本特效的Tag为:
共享世纪
在拖放处按住鼠标进行拖放。
会员登陆
close X
用户名
密 码
验证码
一个倡导开源、绿色、共享的站长资源门户。
推荐关注站长微博:lennyash