EDrag 拖曳层类 v1.0

最新推荐文章于 2024-09-11 15:06:48 发布

piperzero

最新推荐文章于 2024-09-11 15:06:48 发布

阅读量1.1k

点赞数

分类专栏：网站建设文章标签： function border class div object null

网站建设专栏收录该内容

740 篇文章

订阅专栏

介绍eDrag层拖曳组件的使用方法及特点，包括如何指定拖曳范围、初始化组件等，并展示了多个示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.corange.cn//uploadfiles/0922_20038.jpg

<!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>无标题文档</title>
<style type="text/css">
body{
margin:auto;
font-size:12px;
}
.normal {
width: 300px;
margin:13px auto 13px auto;
min-height: 200px;
padding: 2px;
border: 1px solid #666666;
background: #FFFFFF;
}
.normal h1 {
width: 300px;
height: 25px;
margin: 0px;
line-height: 25px;
font-size: 14px;
background-color: #CCC;
}
</style>
<script type="text/javascript">
/**
* eDrag 层拖曳javascript类
* eDrag.proxy("拖曳层","标题","可以扔下的容器");
* eDrag.init();
*
*
* @author Eays
* @version 1.1
*/
var EDrag = _EDrag = {
wraps: [],

titles: [],

target: [],

document: document.documentElement || document.body,

initialPosition: {x:0 ,y:0},

dragArea: null,

dragAreaCopy: null,

dragParent: null,

mouseOffset: 0,

dragAreaId: null,

releaseTarget: null,

init: function()
{
this.style.loadStyle();

for (var i = 0 ; i < this.titles.length ; i++)
{
var title = EF.get(this.wraps[i] , this.titles[i]);

if(!title.releaseTarget)
title.releaseTarget = this.target[i];

title.onmousedown = this.down;
}
document.onmousemove = this.move;
document.onmouseup = this.up;
},

proxy : function(area , drag , target)
{
this.wraps.push(area);
this.titles.push(drag);
target = target == undefined ? null : target;
this.target.push(target);

},

down: function (e){
e = EF.event(e);
current = e.srcElement || e.target;

EDrag.dragArea = EF.get( EF.getDragArea(current) );
if(EDrag.dragArea){
//记录下拖拽对象原始位置
EDrag.initialPosition = EDrag.dragArea.position();
//创建一个原对象的影子
EDrag.hadow = EDrag.fun.createShadow(EDrag.dragArea);
// 用影子替换原有对象并清空对象
EDrag.dragArea = EDrag.dragArea.parentNode.replaceChild(EDrag.hadow , EDrag.dragArea);
EDrag.hadow.html("");
// 将原对象设为绝对
EDrag.dragArea.setStyle("position" , "absolute");
EDrag.dragArea.setStyle("left" , EDrag.initialPosition.x + "px");
EDrag.dragArea.setStyle("top" , EDrag.initialPosition.y + "px");

EDrag.dragAreaId = EDrag.dragArea.id;
EDrag.dragAreaCopy = EDrag.dragArea.copy();

EDrag.dragArea.setStyle("filter" , "alpha(opacity=70)");
EDrag.dragArea.setStyle("opacity" , "0.7");

EDrag.dragAreaCopy.hidden();
EDrag.dragAreaCopy.setStyle("position" , "absolute");

EDrag.dragArea.setStyle("margin" , "auto");
// 添加原对象在文档未尾
EDrag.document.lastChild.appendChild(EDrag.dragArea);
// 鼠标的相对位置
EDrag.mouseOffset = e.offset(EDrag.initialPosition);
//保存release目标
EDrag.releaseTarget = current.releaseTarget;
EDrag.move(e);
}
},

move: function(e)
{
if(!EDrag.dragArea)
return false;

e = EF.event(e);
var position = e.offset(EDrag.mouseOffset);
if(position.x >= 0 && position.x <= EDrag.document.offsetWidth - EDrag.dragArea.offsetWidth)
EDrag.dragArea.setStyle("left" , position.x +"px");

if(position.y >= 0)
EDrag.dragArea.setStyle("top" , position.y +"px");

//遍厉目标对象所有子节点，给出拖曳层的目标层
for(var i in EDrag.releaseTarget)
{
var releaseTarget = EF.get(EDrag.releaseTarget[i]);

var cover = releaseTarget.getCoverElement(EDrag.dragArea);

if(cover && (EDrag.dragParent.last() != cover))
{
cover.parentNode.insertBefore(EDrag.hadow , cover);
}else if(cover && EDrag.dragParent.last() == cover)
{
EDrag.dragParent.appendChild(EDrag.hadow);
}
}
},

up: function()
{
if(!EDrag.hadow && !EDrag.dragArea)
return false;
try{
EDrag.dragArea.setStyle("position" , "static");
EDrag.dragArea.parentNode.removeChild(EDrag.dragArea);
EDrag.dragAreaCopy.id = EDrag.dragAreaId;
EDrag.dragAreaCopy.removeAttribute("style");
EDrag.dragAreaCopy.show();
EDrag.dragParent.replaceChild(EDrag.dragAreaCopy , EDrag.hadow);
EDrag.dragAreaCopy.setStyle("position" , "static");
EDrag.init();
}catch(e){

}

}
}
/**
* 自带的移动样式
*/
EDrag.style = _EDrag.prototype = {
defaultTitle: {
border: "1px dotted #000;",
cursor: "move"
},

defaultDotted: {
border: "1px dotted #CCC",
background: "#EEE"
},

loadStyle: function()
{
for(var i=0 ; i < EDrag.titles.length ; i++)
{
var title = EF.get(EDrag.wraps[i] , EDrag.titles[i]);
if(title != undefined)
{
title.setStyle("cursor" , EDrag.style.defaultTitle.cursor);
} else {
continue;
}
}
},

setBorder: function(element){
element.setStyle("border" , EDrag.style.defaultDotted.border);
},

setBackground: function(element)
{
element.setStyle("background" , EDrag.style.defaultDotted.background);
}
}
EDrag.fun = EF = _EDrag.prototype = {

eventExt: function(e)
{
e.position = function()
{
e = this;
if(e.pageX || e.pageY){
return {x:e.pageX, y:e.pageY};
}
return {
x:e.clientX + document.body.scrollLeft - document.body.clientLeft,
y:e.clientY + document.body.scrollTop - document.body.clientTop
};
},

e.offset = function(position)
{
e = this;
var mouse = e.position();
return {x:parseInt(mouse.x - position.x), y:parseInt(mouse.y - position.y)};
}

return e;
},

event: function(e)
{
var e = e || window.event;
return EF.eventExt(e);
},

getDragArea: function(current)
{
do{
var name = current.id || current.tagName || current.name;
if(EDrag.wraps.search(name))
return EF.ext(current);
}while(current = current.parentNode)
},
search: function(search , array)
{

var flag = false;
array = array || this;

array.sort(function(x , y){
for (var i = 0; i < arguments.length; i++)
{
if(arguments[i].toString() == search)
flag = true;

}
return -1;
});
return flag;
},

_get: function()
{
return document.getElementById(arguments[0])
|| document.getElementsByTagName(arguments[0])
|| document.getElementsByName(arguments[0]);
},

ext: function(object)
{

object.setStyle = function(type , value)
{
eval("object.style."+type+"='"+value+"'");
}

object.position = function()
{
return EF.position(this);
}

object.html = function(value)
{
if(value != undefined)
return object.innerHTML = value;

return object.innerHTML;
}

object.nodes = function()
{
var nodes = [];

for(i = 0 ; i < this.childNodes.length ; i++)
{
var name = this.childNodes[i].toString();

if(name.indexOf("Text") == -1 && name.indexOf("HTMLCollection") == -1)
{
nodes.push(this.childNodes[i]);
}
}
return nodes;
}

object.last = function()
{
var nodes = this.nodes();
return nodes[ nodes.length - 1 ];
},

object.hidden = function()
{
this.setStyle("display" , "none");
},

object.show = function()
{
this.setStyle("display" , "block");
},

object.copy = function()
{
return EF.get(this.cloneNode(true));
},

object.getCoverElement= function(current)
{
if(this.childNodes == undefined)
return false;

var nodes = this.nodes();
for(i = 0 ; i < nodes.length ; i++)
{
var target = EF.get( nodes[i] );
var name = target.toString();

current = EF.ext(current);
current.position = current.position();
/**
* 相对的y坐标
*/
try{
var left = target.getTopArea().centerX - current.position.x;
var top = target.getTopArea().centerY - current.position.y ;

if((left < current.offsetWidth && left > 0 ) && (top - target.offsetWidth / 4 < current.offsetHeight && top > 0))
{
EDrag.dragParent = this;
return target;
}else if((left < current.offsetWidth && left > 0 ) && (top < 0 && top >= 0 - target.offsetHeight / 6))
{
EDrag.dragParent = this;
return target;
}
}
catch(e){ }
}
return false;
}

object.getTopArea = EF.getTopArea;

return object;
},

get: function(element , sonElement)
{
var type = typeof element;

if (type.indexOf("object") != -1)
{
this.object = element;
this.ext(this.object);
return this.object;
}

if (arguments.length > 1)
{
if (this._get(element).length == undefined) {
this.object = this._get(element).getElementsByTagName(sonElement)[0];
this.ext(this.object);
return this.object;
} else {
this.object = this._get(element)[0].getElementsByTagName(sonElement)[0];
this.ext(this.object);
return this.object;
}
}
this.object = this._get(element) || this._get(element)[0];
this.ext(this.object);
return this.object;
},

position: function(e)
{
var p = {x:0 , y:0};
while (e.offsetParent)
{
p.x += e.offsetLeft;
p.y += e.offsetTop;
e = e.offsetParent;
}

if (p.x != "" && p.y != "")
{
return p;
}
},

createBox: function()
{
var box = document.createElement("div");
document.documentElement.lastChild.appendChild(box);
return EF.get(box);
},

createShadow: function(current)
{
if (oldShadow = document.getElementById("EDragShadow"))
{
oldShadow.parentNode.removeChild(oldShadow);
}

current = EF.get(current);

var shadow = current.copy();
shadow = EF.get(shadow);
shadow.id = "EDragShadow";
shadow.setStyle("width" , current.offsetWidth - 6 + "px");
shadow.setStyle("height" , current.offsetHeight - 6 + "px");
EDrag.style.setBorder(shadow);
EDrag.style.setBackground(shadow);
return shadow;
},
/**
* 获取单个对象顶部区域,x,y轴中心点
* @param {Object} element
*/
getTopArea: function(element)
{
try{
element = element || this;
element = EF.get(element);
/**
* 对象左边、顶部坐标
*/
var position = element.position();
/**
* 对象的宽和高度
*/
var offset = {x:element.offsetWidth , y:element.offsetHeight};

/**
* x轴中心点
*/
element.centerX = parseInt(position.x + offset.x / 2);
element.centerY = parseInt(position.y + offset.y / 2);

return element;
}catch(e){}

},

isGecko: function()
{
return navigator.userAgent.indexOf("Gecko") == -1 ? false :true;
},

isOpera: function()
{
return navigator.userAgent.indexOf("Opera") == -1 ? false :true;
},

isIE: function()
{
return document.all ? true : false;
},

onReady: function(newFunction)
{
if(newFunction == undefined)
return false;

this.domReady = false;

if(functions == undefined)
var functions = [];

functions.push(newFunction);

var initial = function()
{
for(var i in functions)
{
functions[i]();
}
}

this.ready = function()
{
if(this.domReady)
initial();

if (EF.isGecko() || EF.isOpera()) {
try {
document.removeEventListener('DOMContentLoaded', initial);
}catch(e){}

document.addEventListener('DOMContentLoaded', initial, false);
this.domReady = true;
}
else if (EF.isIE()) {

var timer = window.setInterval(function()
{
try {
document.body.doScroll("left");
initial();
window.clearInterval(timer);
this.domReady = true;
}
catch (e) {}
}
, 5);
}
}
this.ready();

}
}
Array.prototype.search = EDrag.fun.search;
var dropArea = ["wrap","wrap2"];
EDrag.proxy("drag1","h1",["wrap"]);
EDrag.proxy("drag2","h1",dropArea);
EDrag.proxy("drag3","h1",dropArea);
EDrag.proxy("drag4","h1",dropArea);
EDrag.proxy("drag5","h1",["wrap2"]);
EDrag.proxy("drag6","h1",dropArea);
EDrag.proxy("drag7","h1",dropArea);
EDrag.proxy("drag8","h1",dropArea);
EF.onReady(function(){EDrag.init();});

</script>
</head>
<body>
<table width="778" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"> <div id="wrap">
<div class="normal" id="drag1">
<h1>我不可以拖到右边</h1>
<p>
设置拖放对象以限制拖放区域
</p>
<p>
例：EDrag.proxy( wrap , title , releaseTarget );
</p>
<p>
releaseTarget 为拖放区域的id,tagName,name数组
</p>
</div>
<div class="normal" id="drag2">
<h1>拖放对象说明</h1>
<p id="msg4">
拖放对象继承原对象的所有css特性
</p>
<p>
但似乎对float无效，比要的时候可以外加一个table
</p>
<p>
继承对象保证拖放后的对象和别原对象的一致性
</p>
</div>
<div class="normal" id="drag3">
<h1>将一个层交给eDarg代理</h1>
<p>
EDrag.proxy( wrap , title , releaseTarget );
</p>
<p>
wrap 为可以拖动的层，推荐使用ID
</p>
<p>
title 标题，为鼠标放在上面可以拖动的对象,推荐使用tagName ,releaseTarget上面有说明
</p>
</div>
<div class="normal" id="drag4">
<h1>初始化EDrag拖曳</h1>
<p>
EDrag.init();
</p>
<p>
说明：init() 需要在proxy()方法后面调用
</p>
<p>
这样的结构应该非常易用
</p>
</div>
</div>

</td>
<td valign="top">
<div id="wrap2">
<div class="normal" id="drag5">
<h1>我不可以拖到左边</h1>
<p>
附带函数对象 EDrag.fun 简写EF
</p>
<p>
EF.get();可以支持两个参数,一个参数也可以
</p>
<p>
如：EF.get("wrap" , "h1"); 表示在wrap元素内部的h1元素
</p>
</div>
<div class="normal" id="drag6">
<h1>EF.get函数说明</h1>
<p>
凡是通过EF.get()函数获得的对象都是经过dom扩展的
</p>
<p>
具有一些基本的扩展功能
</p>
<p>
例如：EF.get("wrap").html("demo");
EF.get("wrap").setStyle("margin" , "auto");
</p>
</div>
<div class="normal" id="drag7">
<h1>优势</h1>
<p>
拖曳后的节点上的对象和原对象完全相同，不会影响原排版
</p>
<p>
其它的没什么了，只是感觉比较易用
</p>
<p>

</p>
</div>
<div class="normal" id="drag8">
<h1>新加入onReady函数</h1>
<p>
onReady类似jquery的ready ，使用onReady的优势在于可以在DOM加载完后运行多个函数，
而已运行速度比window.onload快得多
</p>
<p id="msg">

</p>
<p>

</p>
</div>
</div>

</td>
</tr>
</table>
</body>
</html>