首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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>

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

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

Javascript 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
Angular2使用Angular-CLI快速搭建工程（二）
May 21 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
Vue Prop属性功能与用法实例详解
Feb 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
OOP(1) 黑屏(2) ACID(1) Outlook(1) appdata(1) SeaTable(1) minio(1) Windows server 2003(1) Mysql8(2) celery(1)
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
dedecms模版制作使用方法
2007/04/03 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
js用图作提交按钮或超连接
2008/03/26 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Python中pip更新和三方插件安装说明
2018/07/08 Python
Sneaker Studio法国：购买运动鞋
2018/06/08 全球购物
DC Shoes荷兰官方网站：美国极限运动品牌
2019/10/22 全球购物
什么是servlet链？
2014/07/13 面试题
关于礼仪的演讲稿
2014/01/04 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
员工安全生产责任书
2014/07/22 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python