编程 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 相关文章推荐

Jquery使用Firefox FireBug插件调试Ajax步骤讲解

Dec 02 Javascript

jQuery oLoader实现的加载图片和页面效果

Mar 14 Javascript

AngularJs动态加载模块和依赖注入详解

Jan 11 Javascript

jQuery基于扩展简单实现倒计时功能的方法

May 14 Javascript

基于Turn.js 实现翻书效果实例解析

Jun 20 Javascript

JavaScript登录验证码的实现

Oct 27 Javascript

AngularJS入门教程之数据绑定用法示例

Nov 01 Javascript

JavaScript简单生成 N~M 之间随机数的方法

Jan 13 Javascript

详解webpack+angular2开发环境搭建

Jun 28 Javascript

angularjs实现猜大小功能

Oct 23 Javascript

微信小程序基于本地缓存实现点赞功能的方法

Dec 18 Javascript

详解javascript中的Error对象

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