본문 바로가기

drag drop div

by xfree302 2009. 10. 29.
반응형

<div id="drpo" style="width:100;height:100;border:solid 1" draggable="true" >
aaa
</div>

<script language="javascript">


function Drag(Name)
{
 
 this.Name = Name;
 this.DragMode = false;
 this.Element = null;
 this.Collection = [];
 
 
 if (Name == "draggable"){
 
  this.Body = document.all.drpo;
 
 
 } else {
 
  this.Body = document.documentElement;
 
 }
 
 this.Limit = null;
 this.LimitStartX = 0;
 this.LimitEndX = 0;
 this.LimitStartY = 0;
 this.LimitEndY = 0;
 this.ScaleX = 0;
 this.ScaleY = 0;
 this.setX = 0;
 this.setY = 0;
 if (window.attachEvent) {
  this.addEvent = function (Element,Handle,Action) { return Element.attachEvent(Handle,Action); }
 } else if (window.addEventListener) {
  this.addEvent = function (Element,Handle,Action) { return Element.addEventListener(Handle.replace(/^on/i,""),Action,false); }
 }
 this.Run();
}

Drag.prototype =
{
 MoveX : function (PositionX) {
  if (this.Limit != null) {
   if (this.LimitStartX >= PositionX) { this.Element.style.left = this.LimitStartX + "px"; }
   else if (this.LimitEndX <= (PositionX + this.Element.offsetWidth)) { this.Element.style.left = (this.LimitEndX - this.Element.offsetWidth) + "px"; }
   else { this.Element.style.left = PositionX + "px"; }
  } else {
   this.Element.style.left = PositionX + "px";
  }
 },
 MoveY : function (PositionY) {
  if (this.Limit != null) {
   if (this.LimitStartY >= PositionY) { this.Element.style.top = this.LimitStartY + "px"; }
   else if (this.LimitEndY <= (PositionY + this.Element.offsetHeight)) { this.Element.style.top = (this.LimitEndY - this.Element.offsetHeight) + "px"; }
   else { this.Element.style.top = PositionY + "px"; }
  } else {
   this.Element.style.top = PositionY + "px";
  }
 },
 Run : function () {
 
  var This = this;
    
  this.addEvent(this.Body,"onmousedown",function (event) {
   if (event.button == 0 || event.button == 1) {
    This.Element = event.target || event.srcElement;
    This.DragMode = (This.Element.getAttribute(This.Name) == "true") ? true : false;
    if (This.DragMode == true) {
     //if (This.Element.getAttribute(This.Dragelement)) { This.Element = eval(This.Element.getAttribute(This.Dragelement)); }
     //addCollection
     for (var i = 0; i < This.Collection.length; i++) { if (This.Element === This.Collection[i]) { break; } }
     if (i == This.Collection.length) {
      This.Element.style.zIndex = This.Collection.length + 1;
      This.Collection.push(This.Element);
      This.Element.style.position = "absolute";
     }
     var tmpElement = [];
     var tmpzIndex = This.Collection.length - 1;
     for (var i = tmpzIndex; i >= 0; i--) { tmpElement[This.Collection[i].style.zIndex - 1] = This.Collection[i]; }
     for (var i = tmpzIndex; i >= 0; i--) { tmpElement[i].style.zIndex = (tmpElement[i] === This.Element) ? tmpElement.length : tmpzIndex--; }
     This.setX = event.clientX - This.Element.offsetLeft;
     This.setY = event.clientY - This.Element.offsetTop;
    }
   }
  });
  this.addEvent(this.Body,"onmousemove",function (event) {
   if (This.DragMode == true) {
    var PositionX = event.clientX - This.setX;
    var PositionY = event.clientY - This.setY;
   
      This.MoveX(PositionX);
      This.MoveY(PositionY);
   }
  });
  this.addEvent(this.Body,"onmouseup",function () {
   This.DragMode = false;
   This.Element = null;
   This.Limit = null;
   This.LimitStartX = 0;
   This.LimitEndX = 0;
   This.LimitStartY = 0;
   This.LimitEndY = 0;
   This.setX = 0;
   This.setY = 0;
  });
 }
}

 new Drag("draggable");
</script>

 

 

반응형

'' 카테고리의 다른 글

iframe 높이 자동 리사이즈  (0) 2009.11.10
동적 div 생성  (0) 2009.10.29
div 영역 조절  (0) 2009.10.29
Anchor Navigation  (0) 2009.10.29
div 라운드 처리  (0) 2009.10.28