编程 Javascript

JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

Posted in Javascript onFebruary 25, 2013

<HTML> 
<HEAD> 
<TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</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>百度</td><td dragArea="yes" class="dragArea">点此拖动</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> 
<tr><td colspan="3">地址:http://www.baidu.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>新浪</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.CsrCode.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.33567.cn</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>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js调试工具 Javascript Debug Toolkit 2.0.0版本发布

Dec 02 Javascript

jQuery 数据缓存data(name, value)详解及实现

Jan 04 Javascript

js函数的引用，关于内存的开销

Sep 17 Javascript

js实现收缩菜单效果实例代码

Oct 30 Javascript

javascript/jquery获取地址栏url参数的方法

Mar 05 Javascript

AngularJS 让人爱不释手的八种功能

Mar 23 Javascript

深入理解JS中的substr和substring

Apr 26 Javascript

深入分析node.js的异步API和其局限性

Sep 05 Javascript

Bootstrap Table使用心得总结

Nov 29 Javascript

使用jQuery卸载全部事件的思路详解

Apr 03 jQuery

基于Vue实现拖拽功能

Jul 29 Javascript

微信小程序之下拉列表实现方法解析（附完整源码）

Aug 23 Javascript

JavaScript实现网页图片等比例缩放实现代码及调用方式

Feb 25 #Javascript

30分钟就入门的正则表达式基础教程

Feb 25 #Javascript

js根据给定的日期计算当月有多少天实现思路及代码

Feb 25 #Javascript

Jquery实现仿新浪微博获取文本框能输入的字数代码

Feb 22 #Javascript

IE的fireEvent方法概述及应用

Feb 22 #Javascript

js取得url地址参数实例

Feb 22 #Javascript

js模拟滚动条(横向竖向)

Feb 22 #Javascript