001.
002.var getCoords = function(el){
003. var box = el.getBoundingClientRect(),
004. doc = el.ownerDocument,
005. body = doc.body,
006. html = doc.documentElement,
007. clientTop = html.clientTop || body.clientTop || 0,
008. clientLeft = html.clientLeft || body.clientLeft || 0,
009. top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
010. left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
011. return { 'top': top, 'left': left };
012.};
013.
014.var getStyle = function(el, style){
015. if(!+"\v1"){
016. style = style.replace(/\-(\w)/g, function(all, letter){
017. return letter.toUpperCase();
018. });
019. var value = el.currentStyle[style];
020. (value == "auto")&&(value = "0px" );
021. return value;
022. }else{
023. return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
024. }
025.}
026.
027.var Drag = function(id){
028. var el = document.getElementById(id),
029. isQuirk = document.documentMode ? document.documentMode == 5 : document.compatMode && document.compatMode != "CSS1Compat",
030. options = arguments[1] || {},
031. container = options.container || document.documentElement,
032. limit = options.limit,
033. lockX = options.lockX,
034. lockY = options.lockY,
035. ghosting = options.ghosting,
036. handle = options.handle,
037. revert = options.revert,
038. scroll = options.scroll,
039. coords = true || options.coords,
040. onStart = options.onStart || function(){},
041. onDrag = options.onDrag || function(){},
042. onEnd = options.onEnd || function(){} ,
043. marginLeft = parseFloat(getStyle(el,"margin-left")),
044. marginRight = parseFloat(getStyle(el,"margin-right")),
045. marginTop = parseFloat(getStyle(el,"margin-top")),
046. marginBottom = parseFloat(getStyle(el,"margin-bottom")),
047. cls,
048. _handle,
049. _ghost,
050. _top,
051. _left,
052. _html;
053. el.lockX = getCoords(el).left;
054. el.lockY = getCoords(el).top;
055. el.style.position = "absolute";
056. if(handle){
057. cls = new RegExp("(^|\\s)" + handle + "(\\s|$)");
058. for(var i=0,l=el.childNodes.length;i<l;i++){
059. var child = el.childNodes[i];
060. if(child.nodeType == 1 && cls.test(child.className)){
061. _handle = child;
062. break;
063. }
064. }
065. }
066. _html = (_handle || el).innerHTML;
067. var dragstart = function(e){
068. e = e || window.event;
069. el.offset_x = e.clientX - el.offsetLeft;
070. el.offset_y = e.clientY - el.offsetTop;
071. document.onmouseup = dragend;
072. document.onmousemove = drag;
073. if(ghosting){
074. _ghost = el.cloneNode(false);
075. el.parentNode.insertBefore(_ghost,el.nextSibling);
076. if(_handle){
077. _handle = _handle.cloneNode(false);
078. _ghost.appendChild(_handle);
079. }
080. !+"\v1"? _ghost.style.filter = "alpha(opacity=50)" : _ghost.style.opacity = 0.5;
081. }
082. (_ghost || el).style.zIndex = ++Drag.z;
083. onStart();
084. return false;
085. }
086. var drag = function(e) {
087. e = e || window.event;
088. el.style.cursor = "pointer";
089. !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
090. _left = e.clientX - el.offset_x ;
091. _top = e.clientY - el.offset_y;
092. if(scroll){
093. var doc = isQuirk ? document.body : document.documentElement;
094. doc = options.container || doc;
095. options.container && (options.container.style.overflow = "auto");
096. var a = getCoords(el).left + el.offsetWidth;
097. var b = doc.clientWidth;
098. if (a > b){
099. doc.scrollLeft = a - b;
100. }
101. var c = getCoords(el).top + el.offsetHeight;
102. var d = doc.clientHeight;
103. if (c > d){
104. doc.scrollTop = c - d;
105. }
106. }
107. if(limit){
108. var _right = _left + el.offsetWidth ,
109. _bottom = _top + el.offsetHeight,
110. _cCoords = getCoords(container),
111. _cLeft = _cCoords.left,
112. _cTop = _cCoords.top,
113. _cRight = _cLeft + container.clientWidth,
114. _cBottom = _cTop + container.clientHeight;
115. _left = Math.max(_left, _cLeft);
116. _top = Math.max(_top, _cTop);
117. if(_right > _cRight){
118. _left = _cRight - el.offsetWidth - marginLeft - marginRight;
119. }
120. if(_bottom > _cBottom){
121. _top = _cBottom - el.offsetHeight - marginTop - marginBottom;
122. }
123. }
124. lockX && ( _left = el.lockX);
125. lockY && ( _top = el.lockY);
126. (_ghost || el).style.left = _left + "px";
127. (_ghost || el).style.top = _top + "px";
128. coords && _ghost && ((_handle || _ghost).innerHTML = _left + " x " + _top);
129. onDrag();
130. }
131.
132. var dragend = function(){
133. document.onmouseup = null;
134. document.onmousemove = null;
135. _ghost && el.parentNode.removeChild(_ghost);
136. el.style.left = _left + "px";
137. el.style.top = _top +"px";
138. (_handle || el).innerHTML = _html;
139. if(revert){
140. el.style.left = el.lockX + "px";
141. el.style.top = el.lockY + "px";
142. }
143. onEnd();
144. }
145. Drag.z = 999;
146. (_handle || el).onmousedown = dragstart;
147.}
Mikel
}
}
