diff --git a/draggable.js b/draggable.js index dae3f78..c065521 100644 --- a/draggable.js +++ b/draggable.js @@ -35,7 +35,7 @@ } function setPositionType(element) { - element.style.position = 'absolute'; + element.style.position = 'fixed'; } function setDraggableListeners(element) { diff --git a/draggable.min.js b/draggable.min.js index 66dd530..228867f 100644 --- a/draggable.min.js +++ b/draggable.min.js @@ -1 +1,4 @@ -!function(moduleName,definition){if(typeof define==="function"&&typeof define.amd==="object")define(definition);else this[moduleName]=definition()}("draggable",function definition(){function addEventListener(element,eventName,handler){if(element.addEventListener){element.addEventListener(eventName,handler,false)}else if(element.attachEvent){element.attachEvent("on"+eventName,handler)}else{element["on"+eventName]=handler}}function removeEventListener(element,eventName,handler){if(element.removeEventListener){element.removeEventListener(eventName,handler,false)}else if(element.detachEvent){element.detachEvent("on"+eventName,handler)}else{element["on"+eventName]=null}}var currentElement;var fairlyHighZIndex="10";function draggable(element,handle){handle=handle||element;setPositionType(element);setDraggableListeners(element);addEventListener(handle,"mousedown",function(event){startDragging(event,element)})}function setPositionType(element){element.style.position="absolute"}function setDraggableListeners(element){element.draggableListeners={start:[],drag:[],stop:[]};element.whenDragStarts=addListener(element,"start");element.whenDragging=addListener(element,"drag");element.whenDragStops=addListener(element,"stop")}function startDragging(event,element){currentElement&&sendToBack(currentElement);currentElement=bringToFront(element);var initialPosition=getInitialPosition(currentElement);currentElement.style.left=inPixels(initialPosition.left);currentElement.style.top=inPixels(initialPosition.top);currentElement.lastXPosition=event.clientX;currentElement.lastYPosition=event.clientY;var okToGoOn=triggerEvent("start",{x:initialPosition.left,y:initialPosition.top,mouseEvent:event});if(!okToGoOn)return;addDocumentListeners()}function addListener(element,type){return function(listener){element.draggableListeners[type].push(listener)}}function triggerEvent(type,args){var result=true;var listeners=currentElement.draggableListeners[type];for(var i=listeners.length-1;i>=0;i--){if(listeners[i](args)===false)result=false}return result}function sendToBack(element){var decreasedZIndex=fairlyHighZIndex-1;element.style["z-index"]=decreasedZIndex;element.style["zIndex"]=decreasedZIndex}function bringToFront(element){element.style["z-index"]=fairlyHighZIndex;element.style["zIndex"]=fairlyHighZIndex;return element}function addDocumentListeners(){addEventListener(document,"selectstart",cancelDocumentSelection);addEventListener(document,"mousemove",repositionElement);addEventListener(document,"mouseup",removeDocumentListeners)}function getInitialPosition(element){var boundingClientRect=element.getBoundingClientRect();return{top:boundingClientRect.top,left:boundingClientRect.left}}function inPixels(value){return value+"px"}function cancelDocumentSelection(event){event.preventDefault&&event.preventDefault();event.stopPropagation&&event.stopPropagation();event.returnValue=false;return false}function repositionElement(event){event.preventDefault&&event.preventDefault();event.returnValue=false;var style=currentElement.style;var elementXPosition=parseInt(style.left,10);var elementYPosition=parseInt(style.top,10);var elementNewXPosition=elementXPosition+(event.clientX-currentElement.lastXPosition);var elementNewYPosition=elementYPosition+(event.clientY-currentElement.lastYPosition);style.left=inPixels(elementNewXPosition);style.top=inPixels(elementNewYPosition);currentElement.lastXPosition=event.clientX;currentElement.lastYPosition=event.clientY;triggerEvent("drag",{x:elementNewXPosition,y:elementNewYPosition,mouseEvent:event})}function removeDocumentListeners(event){removeEventListener(document,"selectstart",cancelDocumentSelection);removeEventListener(document,"mousemove",repositionElement);removeEventListener(document,"mouseup",removeDocumentListeners);var left=parseInt(currentElement.style.left,10);var top=parseInt(currentElement.style.top,10);triggerEvent("stop",{x:left,y:top,mouseEvent:event})}return draggable}); \ No newline at end of file +!function(g,h){"function"===typeof define&&"object"===typeof define.amd?define(h):this[g]=h()}("draggable",function(){function g(a,b,c){a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):a["on"+b]=c}function h(a,b,c){a.removeEventListener?a.removeEventListener(b,c,!1):a.detachEvent?a.detachEvent("on"+b,c):a["on"+b]=null}function q(a){a.draggableListeners={start:[],drag:[],stop:[]};a.whenDragStarts=k(a,"start");a.whenDragging=k(a,"drag");a.whenDragStops=k(a,"stop")} +function k(a,b){return function(c){a.draggableListeners[b].push(c)}}function l(a,b){for(var c=!0,e=d.draggableListeners[a],f=e.length-1;0<=f;f--)!1===e[f](b)&&(c=!1);return c}function m(a){a.preventDefault&&a.preventDefault();a.stopPropagation&&a.stopPropagation();return a.returnValue=!1}function n(a){a.preventDefault&&a.preventDefault();a.returnValue=!1;var b=d.style,c=parseInt(b.left,10),e=parseInt(b.top,10),c=c+(a.clientX-d.lastXPosition),e=e+(a.clientY-d.lastYPosition);b.left=c+"px";b.top=e+"px"; +d.lastXPosition=a.clientX;d.lastYPosition=a.clientY;l("drag",{x:c,y:e,mouseEvent:a})}function p(a){h(document,"selectstart",m);h(document,"mousemove",n);h(document,"mouseup",p);var b=parseInt(d.style.left,10),c=parseInt(d.style.top,10);l("stop",{x:b,y:c,mouseEvent:a})}var d;return function(a,b){b=b||a;a.style.position="fixed";q(a);g(b,"mousedown",function(b){var e,f;d&&(e=d,e.style["z-index"]=9,e.style.zIndex=9);a.style["z-index"]="10";a.style.zIndex="10";d=a;f=d.getBoundingClientRect();e=f.top;f= +f.left;d.style.left=f+"px";d.style.top=e+"px";d.lastXPosition=b.clientX;d.lastYPosition=b.clientY;l("start",{x:f,y:e,mouseEvent:b})&&(g(document,"selectstart",m),g(document,"mousemove",n),g(document,"mouseup",p))})}});