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启动应用程序的一个简单例子
May 11 Javascript
JavaScript效率调优经验
Jun 04 Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
js实现右键菜单功能
Nov 28 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 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
You might like
深入解析php之sphinx
2013/05/15 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
python循环监控远程端口的方法
2015/03/14 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python单例模式实例解析
2018/08/28 Python
Django框架实现的分页demo示例
2019/05/25 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
超级实用的8个Python列表技巧
2020/08/24 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
数据库的约束含义
2012/09/09 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
文体活动实施方案
2014/03/27 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
电力培训学习心得体会
2016/01/11 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript