diff --git a/simpledrag.js b/simpledrag.js index 5b15336..c672006 100644 --- a/simpledrag.js +++ b/simpledrag.js @@ -69,6 +69,11 @@ // simple drag function sdrag(onDrag, onStop, direction) { + var names = ['left', 'top', 'right', 'bottom']; + var nameX = {true: 'left', false: 'right'}; + var nameY = {true: 'top', false: 'bottom'}; + var x = true; + var y = true; var startX = 0; var startY = 0; var el = this; @@ -84,7 +89,8 @@ startX = fix.startX; } if (false === ('skipX' in fix)) { - el.style.left = (pageX - startX) + 'px'; + el.style[nameX[x]] = (pageX - startX) * (x?1:-1) + 'px'; + el.style[nameX[!x]] = 'unset'; } } if ('horizontal' !== direction) { @@ -93,7 +99,8 @@ startY = fix.startY; } if (false === ('skipY' in fix)) { - el.style.top = (pageY - startY) + 'px'; + el.style[nameY[y]] = (pageY - startY) * (y?1:-1) + 'px'; + el.style[nameY[!y]] = 'unset'; } } } @@ -101,10 +108,13 @@ function startDragging(e) { if (e.currentTarget instanceof HTMLElement || e.currentTarget instanceof SVGElement) { dragging = true; - var left = el.style.left ? parseInt(el.style.left) : 0; - var top = el.style.top ? parseInt(el.style.top) : 0; - startX = e.pageX - left; - startY = e.pageY - top; + var style = getComputedStyle(el); + var vs = {} + names.forEach(n => vs[n] = style[n] ? parseInt(style[n]) : 0); + x = vs.left < vs.right; + y = vs.top < vs.bottom; + startX = e.pageX - vs[nameX[x]] * (x?1:-1); + startY = e.pageY - vs[nameY[y]] * (y?1:-1); window.addEventListener('mousemove', move); } else { @@ -123,4 +133,4 @@ } Element.prototype.sdrag = sdrag; -})(); \ No newline at end of file +})();