JavaScript drag and Snap to browser window -
i want modify below function able not have drag bounds of browser window, "snap" when drag 15px away bounds.
zopim has in chat widget, see: http://zopim.com
(click on chat icon on bottom right corner , start dragging widget end of browser window)
my current function here: http://jsfiddle.net/n6a4q/
code:
function enabledragging(ele) { var dragging = dragging || false, x, y, ox, oy, current; enabledragging.z = enabledragging.z || 1; var grabber = ele; grabber.onmousedown = function (ev) { ev = ev || window.event; var target = ev.target || ev.srcelement; current = target.parentnode; dragging = true; x = ev.clientx ; y = ev.clienty ; ox = current.offsetleft; oy = current.offsettop; current.style.zindex = ++enabledragging.z; // cached value var viewportwidth = viewport().width; var viewportheight = viewport().height; document.onmousemove = function (ev) { ev = ev || window.event; if (dragging == true) { var sx = parsefloat(ev.clientx) - x + ox; var sy = parsefloat(ev.clienty) - y + oy; current.style.left = math.min(math.max(sx, math.min(viewportwidth - sx, 0)), viewportwidth - current.offsetwidth) + "px"; current.style.top = math.min(math.max(sy, math.min(viewportheight - sy, 0)), viewportheight - current.offsetheight) + "px"; } } document.onselectstart = function () { return false; }; document.onmouseup = function (ev) { ev = ev || window.event; dragging && (dragging = false); if (ev.preventdefault) { ev.preventdefault(); } } document.body.style.mozuserselect = "none"; document.body.style.cursor = "default"; return false; }; } function viewport() { var e = window , = 'inner'; if ( !( 'innerwidth' in window ) ) { = 'client'; e = document.documentelement || document.body; } return { width : e[ a+'width' ] , height : e[ a+'height' ] } }
how make snap the bounds of window in same way?
any ideas?
Comments
Post a Comment