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