欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【JS+CSS制作DIV层可(最小化／拖拽／排序)功能实现代码】，下面是详细的讲解！
JS+CSS制作DIV层可(最小化／拖拽／排序)功能实现代码
<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="http://www.jb51.net/article/34247.htm#" 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="http://www.jb51.net/article/34247.htm#" 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="http://www.jb51.net/article/34247.htm#" 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="http://www.jb51.net/article/34247.htm#" 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);
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层可(最小化／拖拽／排序)功能实现代码的用户互动如下：
相关问题：html模仿win7的窗口效果，实现最大化最小化拖拽拖...
答：给你找了个，你看下，代码的实现也是很简单。 >>详细
相关问题：js+css实现div拖动并排序导出
答：我觉得你说的太没有调理性了，最好自己整理下再出来发问题，那样别人也会看得明白的，有什么疑问到我博客留言：http://blog.sina.com.cn/u/2255829365 >>详细
相关问题：关于jquery多个层拖拽问题，如下代码
答：试试这样 试试这样 1将内部的 jQuery(".drag"). 改为 $(this). jQuery(function() { var _move = false; var _x, _y; jQuery(".drag").mousedown(function(e) { &nb... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-