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

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -