[382] | 1 | (function() |
---|
| 2 | { |
---|
[1530] | 3 | var _element = null; |
---|
| 4 | var _elementA = null; |
---|
| 5 | var _elementB = null; |
---|
| 6 | var _parent = null; |
---|
[382] | 7 | |
---|
[1530] | 8 | function _configEvent(pObj, pEvent, pHandler) |
---|
[382] | 9 | { |
---|
| 10 | if ( typeof pObj == 'object' ) |
---|
| 11 | { |
---|
| 12 | if ( pEvent.substring(0, 2) == 'on' ) |
---|
| 13 | pEvent = pEvent.substring(2, pEvent.length); |
---|
[1530] | 14 | |
---|
[382] | 15 | if ( arguments.length == 3 ) |
---|
| 16 | { |
---|
| 17 | if ( pObj.addEventListener ) |
---|
| 18 | pObj.addEventListener(pEvent, pHandler, false); |
---|
| 19 | else if ( pObj.attachEvent ) |
---|
| 20 | pObj.attachEvent('on' + pEvent, pHandler); |
---|
| 21 | } |
---|
| 22 | else if ( arguments.length == 4 ) |
---|
| 23 | { |
---|
[1530] | 24 | if ( pObj.removeEventListener && pObj.removeEventListener != 'undefined') |
---|
[382] | 25 | pObj.removeEventListener(pEvent, pHandler, false); |
---|
| 26 | else if ( pObj.detachEvent ) |
---|
| 27 | pObj.detachEvent('on' + pEvent, pHandler); |
---|
| 28 | } |
---|
| 29 | } |
---|
| 30 | } |
---|
| 31 | |
---|
[1530] | 32 | function _drag(e) |
---|
| 33 | { |
---|
| 34 | if (typeof e.preventDefault != 'undefined') |
---|
| 35 | e.preventDefault(); |
---|
| 36 | else |
---|
| 37 | e.onselectstart = new Function("return false;"); |
---|
| 38 | |
---|
| 39 | _element = ( e.target ) ? e.target : e.srcElement; |
---|
| 40 | |
---|
| 41 | if ( _element ) |
---|
| 42 | { |
---|
| 43 | _configEvent(_element, 'onmousemove', _mouseMove); |
---|
| 44 | _configEvent(top.document, 'onmousemove', _mouseMove); |
---|
| 45 | |
---|
| 46 | _configEvent(_element, 'onmouseup', _mouseUp); |
---|
| 47 | _configEvent(top.document, 'onmouseup', _mouseUp); |
---|
| 48 | } |
---|
| 49 | } |
---|
| 50 | |
---|
| 51 | function _elementShadow( pId ) |
---|
| 52 | { |
---|
| 53 | if( _elementA ) |
---|
| 54 | { |
---|
| 55 | var _elShadow = document.createElement("div"); |
---|
| 56 | _elShadow.id = _elementA.id + "__Shadow"; |
---|
| 57 | _elShadow.setAttribute("onselectstart" , "return false"); |
---|
| 58 | _elShadow.style.width = _elementA.style.width; |
---|
| 59 | _elShadow.style.height = _elementA.style.height; |
---|
| 60 | _elShadow.style.top = _elementA.style.top; |
---|
| 61 | _elShadow.style.left = _elementA.style.left; |
---|
| 62 | _elShadow.style.zIndex = _elementA.style.zIndex; |
---|
| 63 | _elShadow.className = "x-shadow_Div"; |
---|
| 64 | |
---|
| 65 | return _elShadow; |
---|
| 66 | } |
---|
| 67 | } |
---|
| 68 | |
---|
| 69 | function _load() |
---|
| 70 | { |
---|
| 71 | if( arguments.length > 0 ) |
---|
| 72 | { |
---|
| 73 | var pId = arguments[0]; |
---|
| 74 | |
---|
| 75 | _configEvent(document.getElementById( pId + "__draggable"), 'onmousedown', _mouseDownShadow); |
---|
| 76 | } |
---|
| 77 | } |
---|
| 78 | |
---|
[382] | 79 | function _getMouseOffset(e, el) |
---|
| 80 | { |
---|
| 81 | var docPos = _getPosition(el); |
---|
| 82 | var mousePos = _mouseCoords(e); |
---|
| 83 | return { |
---|
| 84 | 'x' : mousePos.x - docPos.x, |
---|
| 85 | 'y' : mousePos.y - docPos.y |
---|
| 86 | }; |
---|
| 87 | } |
---|
| 88 | |
---|
| 89 | function _getPosition(_pObject) |
---|
| 90 | { |
---|
| 91 | var left = 0; |
---|
| 92 | var top = 0; |
---|
| 93 | |
---|
| 94 | while ( _pObject.offsetParent ) |
---|
| 95 | { |
---|
| 96 | left += _pObject.offsetLeft; |
---|
| 97 | top += _pObject.offsetTop; |
---|
| 98 | _pObject = _pObject.offsetParent; |
---|
| 99 | } |
---|
| 100 | |
---|
| 101 | left += _pObject.offsetLeft; |
---|
| 102 | top += _pObject.offsetTop; |
---|
| 103 | |
---|
| 104 | return { |
---|
| 105 | 'x' : left, |
---|
| 106 | 'y' : top |
---|
| 107 | }; |
---|
| 108 | } |
---|
| 109 | |
---|
| 110 | function _mouseCoords(ev) |
---|
| 111 | { |
---|
| 112 | var CoordX = ""; |
---|
| 113 | var CoordY = ""; |
---|
| 114 | |
---|
| 115 | if ( ev.pageX || ev.pageY ) |
---|
| 116 | return { |
---|
| 117 | 'x' : ev.pageX, |
---|
| 118 | 'y' : ev.pageY |
---|
| 119 | }; |
---|
| 120 | |
---|
| 121 | CoordX = ev.clientX + document.body.scrollLeft - document.body.clientLeft; |
---|
| 122 | CoordY = ev.clientY + document.body.scrollTop - document.body.clientTop; |
---|
[1530] | 123 | |
---|
[382] | 124 | return { |
---|
| 125 | 'x' : CoordX, |
---|
| 126 | 'y' : CoordY |
---|
| 127 | }; |
---|
| 128 | } |
---|
| 129 | |
---|
| 130 | function _mouseMove(e) |
---|
| 131 | { |
---|
| 132 | if ( _element ) |
---|
| 133 | { |
---|
| 134 | if ( _element.mouseOffset == null ) |
---|
| 135 | _element.mouseOffset = _getMouseOffset(e, _element); |
---|
| 136 | |
---|
| 137 | var mousePos = _mouseCoords(e); |
---|
| 138 | |
---|
| 139 | var x = mousePos.x - _element.mouseOffset.x; |
---|
| 140 | var y = mousePos.y - _element.mouseOffset.y; |
---|
| 141 | _element.style.left = (( x < 0 ) ? 0 : x) + 'px'; |
---|
| 142 | _element.style.top = (( y < 0 ) ? 0 : y) + 'px'; |
---|
| 143 | } |
---|
| 144 | } |
---|
| 145 | |
---|
| 146 | function _mouseUp() |
---|
| 147 | { |
---|
| 148 | if ( _element ) |
---|
| 149 | { |
---|
[1530] | 150 | _mouseUpShadow(); |
---|
| 151 | |
---|
| 152 | _configEvent(_element, 'onmousemove', _mouseMove, 'remove'); |
---|
| 153 | _configEvent(top.document, 'onmousemove', _mouseMove, 'remove'); |
---|
[382] | 154 | |
---|
[1530] | 155 | _configEvent(_element, 'onmouseup', _mouseUp, 'remove'); |
---|
| 156 | _configEvent(top.document, 'onmouseup', _mouseUp, 'remove'); |
---|
[382] | 157 | |
---|
| 158 | _element.mouseOffset = null; |
---|
| 159 | _element = null; |
---|
| 160 | } |
---|
| 161 | } |
---|
| 162 | |
---|
[1530] | 163 | function _mouseDownShadow(e) |
---|
[382] | 164 | { |
---|
[1530] | 165 | try |
---|
[382] | 166 | { |
---|
[1530] | 167 | if( arguments.length > 0 ) |
---|
[382] | 168 | { |
---|
[1530] | 169 | var _el = ( e.target ) ? e.target : e.srcElement; |
---|
| 170 | var _id = (_el.id.substring(0, _el.id.indexOf("__draggable"))); |
---|
| 171 | |
---|
| 172 | _elementA = document.getElementById( _id + "__parent"); |
---|
| 173 | _elementB = _elementShadow( _id + "__parent"); |
---|
| 174 | |
---|
| 175 | _elementA.style.left = '-1500px'; |
---|
| 176 | _parent = _elementA.parentNode; |
---|
| 177 | |
---|
| 178 | var _B = _parent.appendChild(_elementB); |
---|
| 179 | |
---|
| 180 | _configEvent( _elementB, 'onmouseup', _mouseUpShadow); |
---|
| 181 | _configEvent( _elementB, 'onmousemove', _drag); |
---|
[382] | 182 | } |
---|
[1530] | 183 | |
---|
| 184 | }catch(e){} |
---|
[382] | 185 | } |
---|
| 186 | |
---|
[1530] | 187 | function _mouseUpShadow() |
---|
[382] | 188 | { |
---|
[1530] | 189 | try |
---|
[382] | 190 | { |
---|
[1566] | 191 | _elementA.style.top = _elementB.style.top; |
---|
| 192 | _elementA.style.left = _elementB.style.left; |
---|
[1530] | 193 | |
---|
| 194 | var _B = _parent.removeChild(_elementB); |
---|
[382] | 195 | |
---|
[1530] | 196 | _elementA = null; |
---|
| 197 | _elementB = null; |
---|
| 198 | _element = null; |
---|
[382] | 199 | } |
---|
[1530] | 200 | catch(e){} |
---|
[382] | 201 | } |
---|
[1530] | 202 | |
---|
| 203 | function dragdrop(){} |
---|
[382] | 204 | |
---|
[1530] | 205 | dragdrop.prototype.set = _load; |
---|
| 206 | window.dragdrop = dragdrop; |
---|
| 207 | |
---|
| 208 | })(); |
---|