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