EDrag 拖曳层类 v1.0

作者：eays 来源：蓝色理想文章点击数：

<!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>

Tags:EDrag 拖曳层特效

上一篇：再发适合各种浏览器的拖动层
下一篇：风无双兼容IE6 IE7 FF的显示隐藏菜单测试版

·JS旋转图片阵效果 - 已封装,兼容IE,FF,OP,GG	09-29
·添加了行为的CSS星级选择器	09-29
·风无双兼容IE6 IE7 FF的显示隐藏菜单测试版	09-22
·再发适合各种浏览器的拖动层	09-15
·一个弹出层的JS特效	09-05
·51job弹出层效果	08-25
·简单代码实现的个性产品列表	08-20
·仿163 幻灯片特效	08-18

热门浏览

·快速实用的人物磨皮及美白方法	05-31
·Photoshop简单给MM美白和润色	07-14
·扩展你的思维--影子的创意	03-19
·用Photoshop简单打造毛笔字效果	03-15
·Fireworks打造个性网店闪字签名	03-24
·Photoshop制作一颗中国水晶心	04-21
·PS制作简单的半调立体字	05-21
·PS把帅哥的照片转手绘效果	07-25
·实例详细讲解ASP生成静态页面方	03-15
·国外优秀场景CG设计欣赏	03-21
·Photoshop还原模糊偏色照片的真	07-15
·Photoshop把美女照片制作成拼图	04-19
·很朦胧很震撼的人体摄影	03-15
·新加坡设计师Charlene Chua作品	03-17

编辑推荐

·预测：未来十年互联网媒体地位	09-29
·七招教你如何识别空间商骗子	09-26
·新网站推广的五个招数与利弊分	09-24
·奶粉事件的思考食品安全公益海	09-22
·可口可乐的全新视界	08-19
·网站的视觉设计十八条	08-16
·爱情的见证——不一样的婚礼摄	08-15
·金牌榜 - html分析/xml分页应用	08-15
·百家争鸣决战奥运营销之巅	08-15
·奥运奖牌榜代码	08-14
·企业文化决定发展专访优久总裁	08-02
·PS制作七夕情人节闪图签名	08-01
·如何让层垂直居中于浏览器窗口	07-28
·快准狠——图王畅谈中小网站	07-28