<script type="text/javascript"><!--
google_ad_client = "pub-4490194096475053";
/* 内容页,300x250,第一屏 */
google_ad_slot = "3685991503";
google_ad_width = 300;
google_ad_height = 250;
// --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Drag & Drop</title>
<style type="text/css">
body{ background-color:#36393D; font-size:12px; margin:0px; }
DIV.dragLayer{
border:1px solid #369;
background-color:#6BBA70;
margin-bottom:10px;
}
DIV.dragLayer_over{
border:1px solid #C79810;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}
DIV.clone_dragLayer_over{
border:1px dashed #FA0;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
margin-bottom:10px;
}
DIV.dragHeader{
width:100%; height:20px ; line-height:20px; background-color:#006E2E; color:#FFFFFF;
}
DIV.dragHeader_over{
width:100%; height:20px ; line-height:20px; background-color:#C79810;
}
SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings}
#container{margin:0px}
#leftcontainer{float:left; width:33%;}
#middlecontainer{float:left; width:34%;}
#middlecontainer div{margin-left:auto; margin-right:auto}
#rightcontainer{float:right; width:33%;}
#rightcontainer div{float:right}
DIV.content{width:100%; padding:4px}
</style>
<script type="text/javascript">
var CoolDrag={
obj : null, //目标对象
cloneobj : null, //拖动对象
container : null, //容器
dragged : false, //拖动标志
shadow: null, //阴影
init:function(id){
CoolDrag.container = $(id);
var cooldrag = CoolDrag.read("cooldrag");
if(cooldrag != ""){//读取cookie
var subcontainer = cooldrag.split("|");
for(var i=0 ; i < subcontainer.length; i++){
var subcontainerItem = subcontainer[i].split(":");
if($(subcontainerItem[0])){
var items = subcontainerItem[1].split(",");
for(var j=0; j< items.length; j++){
if($(items[j])) $(subcontainerItem[0]).appendChild($(items[j]));
}
}
}
}
cleanWhitespace(CoolDrag.container)//清除空白节点
var collection = CoolDrag.container.getElementsByTagName("DIV");
for(var i = 0; i < collection.length; i++){
if(collection[i].className == "dragLayer"){
var o = collection[i].firstChild;
SavedObject.push([o.parentNode.id,1,o.parentNode.style.height]);
o.onmousedown = CoolDrag.start;
}
}
document.onmousemove = CoolDrag.drag;
document.onmouseup = CoolDrag.end;
},
start:function(e){
if(!e) e = window.event;
var obj = getT(e);
if(obj.className == "min"){
CoolDrag.min(e);
return;
}else if(obj.className == "close"){
CoolDrag.close(e);
return;
}else{
if(obj.className != "dragHeader") obj = obj.parentNode;
}
CoolDrag.dragged = true;
CoolDrag.obj = obj.parentNode;
CoolDrag.cloneobj = CoolDrag.obj.cloneNode(true);
document.body.appendChild(CoolDrag.cloneobj);
CoolDrag.shadow = document.createElement("DIV");
document.body.appendChild(CoolDrag.shadow);
with(CoolDrag.cloneobj.style){
position = "absolute";
zIndex = 1000;
left = getRealLeft(CoolDrag.obj) + "px";
top = getRealTop(CoolDrag.obj) + "px";
}
with(CoolDrag.shadow.style){
position = "absolute";
zIndex = 999;
left = getRealLeft(CoolDrag.obj) + 4 + "px";
top = getRealTop(CoolDrag.obj) + 4 + "px";
width = CoolDrag.obj.offsetWidth + "px";
height = CoolDrag.obj.offsetHeight + "px";
backgroundColor = "#ccc";
if(navigator.userAgent.indexOf("Gecko") != -1)
MozOpacity = "0.5";
else if(navigator.userAgent.indexOf("MSIE") != -1)
filter = "alpha(opacity=50)";
}
CoolDrag.cloneobj.initMouseX = getMouseX(e);
CoolDrag.cloneobj.initMouseY = getMouseY(e);
CoolDrag.cloneobj.initoffsetL = getRealLeft(CoolDrag.obj);
CoolDrag.cloneobj.initoffsetY = getRealTop(CoolDrag.obj);
//change style
CoolDrag.cloneobj.firstChild.className="dragHeader_over";
CoolDrag.cloneobj.className = "dragLayer_over";
CoolDrag.obj.className="clone_dragLayer_over";
},
drag:function(e){
if(!CoolDrag.dragged||CoolDrag.obj==null)return;
if(!e) e = window.event;
var currenX = getMouseX(e);
var currenY = getMouseY(e);
if(CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX > getRealLeft(CoolDrag.container))
CoolDrag.cloneobj.style.left = (CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX) + "px";
else
CoolDrag.cloneobj.style.left = getRealLeft(CoolDrag.container) + "px";
if(CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY > getRealTop(CoolDrag.container))
CoolDrag.cloneobj.style.top = (CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY) + "px";
else
CoolDrag.cloneobj.style.top = getRealTop(CoolDrag.container) + "px";
var collection = CoolDrag.container.getElementsByTagName("DIV");
var finded = false;
for(var i = 0; i < collection.length; i++){
var o = collection[i];
if(o.className == "dragLayer"){
if(((getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft) ||
(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth &&
getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth)) &&
getRealTop(o) <= CoolDrag.cloneobj.offsetTop && getRealTop(o) + o.offsetHeight >= CoolDrag.cloneobj.offsetTop)
{
//window.status = getRealTop(o.parentNode)+"|"+(CoolDrag.cloneobj.offsetTop - 8);
if(getRealTop(o.parentNode) >= CoolDrag.cloneobj.offsetTop - 8){
o.parentNode.insertBefore(CoolDrag.obj,o);
}else{
if(o.nextSibling)
o.parentNode.insertBefore(CoolDrag.obj,o.nextSibling);
else
o.parentNode.appendChild(CoolDrag.obj);
}
finded = true;
break;
}
}
}
if(!finded){
for(var i = 0; i < CoolDrag.container.childNodes.length; i++){
var o = CoolDrag.container.childNodes[i];
if(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft)
o.appendChild(CoolDrag.obj);
}
}
with(CoolDrag.shadow.style){
left = (CoolDrag.cloneobj.offsetLeft + 4) + "px";
top = (CoolDrag.cloneobj.offsetTop + 4) + "px";
}
//document.title = CoolDrag.cloneobj.style.left + "|" + CoolDrag.shadow.style.left;
},
end:function(e){
if(!CoolDrag.dragged)return;
CoolDrag.obj.className = "dragLayer";
CoolDrag.dragged = false;
CoolDrag.shadow.parentNode.removeChild(CoolDrag.shadow);
CoolDrag.timer = CoolDrag.repos(150,15);
//保存cookie
var str="";
for(var i=0; i<CoolDrag.container.childNodes.length; i++){
var o = CoolDrag.container.childNodes[i];
if(i>0)str += "|";
str += o.id + ":";
for(var j=0; j < o.childNodes.length; j++){
if(j>0)str += ",";
str += o.childNodes[j].id ;
}
}
CoolDrag.save("cooldrag",str,24);
},
repos:function(aa,ab){
//var f=CoolDrag.obj.filters.alpha.opacity;
var tl=getRealLeft(CoolDrag.cloneobj);
var tt=getRealTop(CoolDrag.cloneobj);
var kl=(tl-getRealLeft(CoolDrag.obj))/ab;
var kt=(tt-getRealTop(CoolDrag.obj))/ab;
//var kf=f/ab;
return setInterval(function(){if(ab<1){
clearInterval(CoolDrag.timer);
CoolDrag.cloneobj.parentNode.removeChild(CoolDrag.cloneobj);
CoolDrag.obj=null;
return;
}
ab--;
tl-=kl;
tt-=kt;
//f-=kf;
CoolDrag.cloneobj.style.left=parseInt(tl)+"px";
CoolDrag.cloneobj.style.top=parseInt(tt)+"px";
//CoolDrag.tdiv.filters.alpha.opacity=f;
}
,aa/ab)
},
min:function(e){
if(!e) e = window.event;
var obj = getT(e);
var rootObj = obj.parentNode.parentNode.parentNode;
var id = rootObj.id;
if(SavedObject.getStatus(id)[1]){
SavedObject.setStatus(id,0);
rootObj.style.height = "20px";
rootObj.childNodes[1].style.display = 'none';
}else{
SavedObject.setStatus(id,1);
rootObj.lastChild.style.display = '';
rootObj.style.height = SavedObject.getStatus(id)[2];
}
obj.innerHTML = obj.innerHTML==0 ? 2 :0;
},
close:function(e){
if(!e) e = window.event;
var obj = getT(e);
var rootObj = obj.parentNode.parentNode.parentNode;
rootObj.parentNode.removeChild(rootObj);
},
save:function(name, value, hours){
var expire = "";
if(hours != null)
{
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
},
read:function(name){
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
offset = document.cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
}
function $(id){
return document.getElementById(id);
}
function getT(e){
return e.target || e.srcElement;
}
function getMouseX(e){
return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft - document.body.clientLeft;
}
function getMouseY(e){
return e.pageY ? e.pageY : e.clientY + document.body.scrollTop - document.body.clientTop;
}
function getRealLeft(o){
var l = 0;
while(o){
l += o.offsetLeft - o.scrollLeft;
o = o.offsetParent;
}
return(l);
}
function getRealTop(o){
var t = 0;
while(o){
t += o.offsetTop - o.scrollTop;
o = o.offsetParent;
}
return(t);
}
function cleanWhitespace(node) {
var notWhitespace = //S/;
for (var i=0; i < node.childNodes.length; i++) {
var childNode = node.childNodes[i];
if ((childNode.nodeType == 3) && (!notWhitespace.test(childNode.nodeValue))) {
node.removeChild(node.childNodes[i]);
i--;
}
if (childNode.nodeType == 1) {
cleanWhitespace(childNode);
}
}
}
var SavedObject={
elements : new Array(),
setStatus : function(id,s){
for(var i=0;i<SavedObject.elements.length;i++){
if(SavedObject.elements[i][0]==id){
SavedObject.elements[i][1]=s;
break;
}
}
},
getStatus : function(id){
for(var i=0;i<SavedObject.elements.length;i++){
if(SavedObject.elements[i][0]==id)return SavedObject.elements[i];
}
},
push : function(o){
SavedObject.elements[SavedObject.elements.length]=o;
}
}
</script>
</head>
<body onLoad="CoolDrag.init('container');">
<br />
<div id="container">
<div id="leftcontainer">
<div style="height:100px; width:200px; " class="dragLayer" id="win1">
<div class="dragHeader">
<div style="float:left">第一个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 1</div>
</div>
<div style="height:100px; width:200px; " class="dragLayer" id="win2">
<div class="dragHeader">
<div style="float:left">第二个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 2</div>
</div>
</div>
<div id="middlecontainer">
<div style="height:100px; width:200px; " class="dragLayer" id="win3">
<div class="dragHeader">
<div style="float:left">第三个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 3</div>
</div>
<div style="height:100px; width:200px; " class="dragLayer" id="win4">
<div class="dragHeader">
<div style="float:left">第四个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 4</div>
</div>
</div>
<div id="rightcontainer">
<div style="height:100px; width:200px; " class="dragLayer" id="win5">
<div class="dragHeader">
<div style="float:left">第五个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 5</div>
</div>
<div style="height:100px; width:200px; " class="dragLayer" id="win6">
<div class="dragHeader">
<div style="float:left">第六个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 6</div>
</div>
<div style="height:100px; width:200px; " class="dragLayer" id="win7">
<div class="dragHeader">
<div style="float:left">第七个窗口</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 7</div>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
本篇文章将聚焦于一个特定的应用场景：使用jQuery实现拖拽功能来动态添加div，并保存拖拽后的位置效果。这个功能在网页布局、可配置界面或者拖放式应用设计中非常常见。 首先，我们需要理解jQuery UI中的Draggable...
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
本示例涉及的主题是“js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml”，这是一项实用技术，尤其适用于创建交互性强的Web 2.0应用程序。下面将详细介绍这一主题的相关知识点。 首先，让我们了解...
拖拽 拖动div 可拖拽div框 div+css html静态资源
在网页开发中，"拖拽+拖拽改变div大小"是一种常见的交互设计，它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...
本示例“JS拖拽DIV后保存位置”是关于如何使用JavaScript实现用户可以拖动HTML中的<div>元素，并在拖动后保存其位置。通达OA（Tongda Office Automation）是一款企业级协同办公软件，此实例可能是为通达OA的自定义...
网站个性化 div可以随意拖动 cookie保存！
本实例将介绍如何使用PHP、MySQL和JavaScript实现一个拖拽Div的动态效果，并将其数据保存到数据库中，便于后续处理和展示。 **一、JavaScript拖拽功能实现** 1. **事件监听**：首先，我们需要在HTML中为要拖动的...
标题“拖动div到另一个div中”描述的就是这样一个功能，即实现一个div元素能够被拖动并放置到另一个div内，同时显示被拖动div的ID。这个功能在各种应用场景中都很有用，如文件管理器、布局构建器或富文本编辑器等。 ...
利用js技术实现div模块的拖拽并且交换位置，刷新后保存交换后的位置
js拖动 拖拽div大小，内部随意文件操作。完美实现版
在标题“拖动多个div”中，我们关注的是如何使一个或多个 `div` 元素变得可拖动，即用户可以通过鼠标进行交互，自由地在页面上移动这些元素。这种功能在构建各种交互式界面时非常有用，例如，可以用于创建可自定义...
以上就是实现“js拖动div并拖动DIV的大小”的主要步骤和涉及的技术。实际开发中，你可以选择使用库或框架，如jQuery UI的Resizable组件，来简化这一过程。然而，理解这些基础知识将帮助你更好地理解和定制功能，特别...
《jQuery实现鼠标拖动div排序技术详解》 在网页开发中，用户交互体验是至关重要的。其中，元素的可拖动排序功能可以让用户更加直观地调整界面布局，提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...
本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI，实现了一个用户界面元素（如div）可以被拖动的功能，从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解： 1. **jQuery基础**：jQuery...
本文将深入探讨如何在.NET项目中利用jQuery实现Div元素的拖拽功能，并且这种效果能够持久化，即使页面刷新也能保持之前的拖动位置。 首先，我们需要理解jQuery的基本用法。jQuery通过选择器来定位HTML元素，然后对...
这个功能允许用户通过拖动div元素来改变它们在页面上的顺序，从而实现自定义排序。 首先，HTML（超文本标记语言）是网页的基础结构语言，它定义了网页的各个部分，如标题、段落、链接等。在拖放排序的场景中，HTML...
本文将深入探讨如何使用JavaScript实现这个功能，让div元素可以在页面上自由移动，实现“js拖拽div随意摆放”。 首先，我们需要创建一个可拖动的div元素。在HTML中，我们可以这样定义： ```html <div id=...
<div class="draggable-div">待拖动的值</div> <tr><th>列标题</th></tr> ``` 4. **CSS样式**: 为了提高用户体验，通常需要为可拖动的div和可放置的区域添加适当的CSS样式，以突出其状态，如悬停时...
本篇文章将详细探讨如何利用Div+CSS技术实现完美的层拖拽特效，这种特效常用于创建弹出层或可拖动的对话框，提升用户体验。 首先，要实现Div的拖拽功能，我们需要创建一个可拖动的Div元素，并为其添加CSS样式，使其...