您的位置：首页 > Web前端 > HTML
html模块拖拽功能

2015-06-06 18:31 591 查看
实现html模块拖拽功能如下图
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style type="text/css">
body{
margin-top: 0px;
}

DIV.dragHeader {
width: 100%;
height: 20px;
line-height: 20px;
background-color: #8FACBC; /*模块标题背景颜色 */
color: #FFFFFF;
}

DIV.dragLayer {
/*border: 1px solid #120945;*/
margin-bottom: 10px;
/*width: 100%;*/
margin: auto;
}

DIV.dragLayer_over { /*拖动时内容区域样式*/
border: 1px solid #dce9ff;
/*background-color: #FFFFFF;*/
width: 400px;
filter: alpha(opacity = 80);
-moz-opacity: 0.8; /* Moz + FF */
opacity: 0.8; /*支持CSS3的浏览器（FF 1.5也支持）*/
margin-top: 0px; /*拖动时拖动DIV距离鼠标的位置*/
}

DIV.clone_dragLayer_over {
border: 1px dashed #dce9ff;
/*background-color: #FFF;*/
filter: alpha(opacity =80);
-moz-opacity: 0.8; /*Moz + FF*/
opacity: 0.8; /*支持CSS3的浏览器（FF 1.5也支持）*/
/*margin-bottom: 10px;*/
/*margin-top: 50px;*/
}

DIV.dragHeader_over { /*拖动时title*/
width: 400px;
height: 20px;
line-height: 20px;
background-color: #1c7cb8;
margin-top: 0px;
}

SPAN.min, SPAN.close {
cursor: pointer;
font-family: Webdings
}

#container {
width: 80%;
margin: auto;
} /*DIV距离边的距离*/
#leftContainer {
float: left;
width: 400px;
margin: 0px 1px;
background-color: aliceblue;
min-height: 100px;
overflow: inherit;
}

#rightContainer {
float: left;
width: 400px;
margin: 0px 0px;
background-color: aliceblue;
min-height: 100px;
overflow: initial;
}

DIV.content {
width: 100%;
padding: 4px
}

.btn {
border: 1px thin #ddd;
width: 100px;
height: 30px
}

header {
background-color: #1c7cb8;
text-align: center;
font-size: 20px;
}
</style>
<script type="text/javascript">
var drag_val = ""; //将cookie值赋给JS

var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {

if (window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
}
//----------------------------------
var Drag = {
obj : null, //目标对象
cloneobj : null, //拖动对象
container : null, //容器
dragged : false, //拖动标志
shadow : null, //阴影

data : {},
init : function(id) {
Drag.container = $(id);
drag_val = Drag.read("drag_val");
if (drag_val) {
var dragObj = JSON.parse(drag_val);
if (dragObj.rightContainer) {
var modules = dragObj.rightContainer;
for (var i = 0; i < modules.length; i++) {
$("rightContainer").appendChild($(modules));
}
}
if (dragObj.leftContainer) {
var modules = dragObj.leftContainer;
for (var i = 0; i < modules.length; i++) {
$("leftContainer").appendChild($(modules));
}
}
}
//			if (drag_val) {//读取cookie
//
//                for(var proc in dragObj){
//                    for(var i=0;i<proc.length;i++){
//
//                    }
//                }
//				var subcontainer = drag_val.split("|");
//				alert(subcontainer);
//				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(Drag.container)//清除空白节点
var collection = Drag.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 = Drag.start;
}
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;

Drag.buildData();
},

start : function(e) {
if (!e)
e = window.event;
var obj = getTarget(e);
if (obj.className == "min") {
Drag.min(e);
return;
} else if (obj.className == "close") {
Drag.close(e);
return;
} else {
if (obj.className != "dragHeader")
obj = obj.parentNode;
}
Drag.dragged = true;
Drag.obj = obj.parentNode;
Drag.cloneobj = Drag.obj.cloneNode(true);
document.body.appendChild(Drag.cloneobj);
Drag.shadow = document.createElement("DIV");
document.body.appendChild(Drag.shadow);
with (Drag.cloneobj.style) {
position = "absolute";
zIndex = 1000;
left = getRealLeft(Drag.obj) + "px";
top = getRealTop(Drag.obj) + "px";
}
with (Drag.shadow.style) {
position = "absolute";
zIndex = 999;
left = getRealLeft(Drag.obj) + 4 + "px";
top = getRealTop(Drag.obj) + 4 + "px";
width = Drag.obj.offsetWidth + "px";
height = Drag.obj.offsetHeight + "px";
//				backgroundColor = "#FFF"; //拖动过程中的背景色
if (navigator.userAgent.indexOf("Gecko") != -1)
MozOpacity = "0.5";
else if (navigator.userAgent.indexOf("MSIE") != -1)
filter = "alpha(opacity=50)";
}

Drag.cloneobj.initMouseX = getMouseX(e);
Drag.cloneobj.initMouseY = getMouseY(e);
Drag.cloneobj.initoffsetL = getRealLeft(Drag.obj);
Drag.cloneobj.initoffsetY = getRealTop(Drag.obj);
//change style
Drag.cloneobj.firstChild.className = "dragHeader_over";
Drag.cloneobj.className = "dragLayer_over";
Drag.obj.className = "clone_dragLayer_over";
},

drag : function(e) {
if (!Drag.dragged || Drag.obj == null)
return;
if (!e)
e = window.event;
var currenX = getMouseX(e);
var currenY = getMouseY(e);

if (Drag.cloneobj.initoffsetL + currenX
- Drag.cloneobj.initMouseX > getRealLeft(Drag.container))
Drag.cloneobj.style.left = (Drag.cloneobj.initoffsetL
+ currenX - Drag.cloneobj.initMouseX)
+ "px";
else
Drag.cloneobj.style.left = getRealLeft(Drag.container)
+ "px";
if (Drag.cloneobj.initoffsetY + currenY
- Drag.cloneobj.initMouseY > getRealTop(Drag.container))
Drag.cloneobj.style.top = (Drag.cloneobj.initoffsetY
+ currenY - Drag.cloneobj.initMouseY)
+ "px";
else
Drag.cloneobj.style.top = getRealTop(Drag.container)
+ "px";

var collection = Drag.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) <= Drag.cloneobj.offsetLeft && getRealLeft(o)
+ o.offsetWidth >= Drag.cloneobj.offsetLeft) || (getRealLeft(o) <= Drag.cloneobj.offsetLeft
+ Drag.cloneobj.offsetWidth && getRealLeft(o)
+ o.offsetWidth >= Drag.cloneobj.offsetLeft
+ Drag.cloneobj.offsetWidth))
&& getRealTop(o) <= Drag.cloneobj.offsetTop
&& getRealTop(o) + o.offsetHeight >= Drag.cloneobj.offsetTop) {
//window.status = getRealTop(o.parentNode)+"|"+(Drag.cloneobj.offsetTop - 8);
if (getRealTop(o.parentNode) >= Drag.cloneobj.offsetTop - 8) {
o.parentNode.insertBefore(Drag.obj, o);
} else {
if (o.nextSibling)
o.parentNode.insertBefore(Drag.obj,
o.nextSibling);
else
o.parentNode.appendChild(Drag.obj);
}
finded = true;
break;
}
}
}

if (!finded) {
for (var i = 0; i < Drag.container.childNodes.length; i++) {
var o = Drag.container.childNodes[i];
if (getRealLeft(o) <= Drag.cloneobj.offsetLeft
&& getRealLeft(o) + o.offsetWidth >= Drag.cloneobj.offsetLeft)
o.appendChild(Drag.obj);
}
}
with (Drag.shadow.style) {
left = (Drag.cloneobj.offsetLeft + 4) + "px";
top = (Drag.cloneobj.offsetTop + 4) + "px";
}
document.title = 'left:'+Drag.cloneobj.style.left + " top:" + Drag.shadow.style.top;
},

end : function(e) {
if (!Drag.dragged)
return;
Drag.obj.className = "dragLayer";
Drag.dragged = false;
Drag.shadow.parentNode.removeChild(Drag.shadow);
Drag.timer = Drag.repos(150, 15);
Drag.buildData();

//Drag.save(); // 每次触发拖放处理后保存
},
buildData : function() {
for ( var field in Drag.data) {
delete Drag.data[field];
}
for (var i = 0; i < Drag.container.childNodes.length; i++) {
var o = Drag.container.childNodes[i];
if (!Drag.data[o.id]) {
Drag.data[o.id] = new Array();
}
for (var j = 0; j < o.childNodes.length; j++) {
if (o.childNodes[j].localName === 'div') {
Drag.data[o.id].push(o.childNodes[j].id);
}
}
}
},
repos : function(aa, ab) {
//var f=Drag.obj.filters.alpha.opacity;
var tl = getRealLeft(Drag.cloneobj);
var tt = getRealTop(Drag.cloneobj);
var kl = (tl - getRealLeft(Drag.obj)) / ab;
var kt = (tt - getRealTop(Drag.obj)) / ab;
//var kf=f/ab;
return setInterval(
function() {
if (ab < 1) {
clearInterval(Drag.timer);
Drag.cloneobj.parentNode
.removeChild(Drag.cloneobj);
Drag.obj = null;
return;
}
ab--;
tl -= kl;
tt -= kt;
//f-=kf;
Drag.cloneobj.style.left = parseInt(tl) + "px";
Drag.cloneobj.style.top = parseInt(tt) + "px";
//Drag.tdiv.filters.alpha.opacity=f;
}, aa / ab)
},
min : function(e) {
if (!e)
e = window.event;
var obj = getTarget(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 = getTarget(e);
var rootObj = obj.parentNode.parentNode.parentNode;
rootObj.parentNode.removeChild(rootObj);
},
save : function() {
createXMLHttpRequest();
var url = "submit?drag_val=" + JSON.stringify(Drag.data);
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = function(){
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
alert('保存成功');
} else {
window.alert("保存失败");
}
}
};
XMLHttpReq.send(null);
//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 getTarget(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;
}
}

var counter = 0;

function addModule(parentId, prefix) {
var node = document.createElement('div');
node.id = "module" + counter;
node.setAttribute('content', "测试");
node.className = 'dragLayer';

var dragNode = document.createElement('div');
dragNode.className = "dragHeader";
dragNode.style.cursor = 'move';

var dragNode_1 = document.createElement('div');
dragNode_1.style.float = 'left';
dragNode_1.innerText = prefix + "-module-" + counter;
//		var dragNode_2 = document.createElement('div');
//		dragNode_2.style.float = 'none';
//	 	var dragNode_3 = document.createElement('div');
//		dragNode_3.style.float = 'right';
dragNode.appendChild(dragNode_1);
//		dragNode.appendChild(dragNode_2);
/* dragNode.appendChild(dragNode_3); */
node.appendChild(dragNode);

var contentNode = document.createElement('div');
contentNode.className = 'content';
contentNode.innerText = counter+ "测试测试车是费水电费水电费水电费是的水电费";
node.appendChild(contentNode);
$(parentId).appendChild(node);

Drag.init('container');
counter++;
}

</script>
</head>
<body onload="Drag.init('container')">
<div id="container">
<div id="leftContainer">
<header>left module</header>
<!--
<div class="dragLayer" id="win1">
<div class="dragHeader" style="cursor: move">
<div style="float: left">product new</div>
<div style="float: none"></div>
<div style="float: right;">X</div>
</div>
<div class="content">这里是内容哈哈哈！！！ 这里是内容哈哈哈！！！ 这里是内容哈哈哈！！！
这里是内容哈哈哈！！！ 这里是内容哈哈哈！！！ 这里是内容哈哈哈！！！</div>
</div>
-->
</div>
<div id="rightContainer">
<header>right module</header>
</div>
</div>
<button class="btn" onclick="addModule('leftContainer','L')">添加左边</button>
<button class="btn" onclick="addModule('rightContainer','R')">添加右边</button>
<button class="btn" onclick="Drag.save()">保存拖拽结果</button>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航