NNTP: Limit the dragged item to the viewport boundaries....

chrome/browser/resources/new_new_tab.js

 
 // Helpers
 
 function $(id) {
   return document.getElementById(id);
 }
 
 // TODO(arv): Remove these when classList is available in HTML5.
 // https://bugs.webkit.org/show_bug.cgi?id=20709
 function hasClass(el, name) {
@@ skipping 1459 matching lines @@
       this.dragEndTimer = window.setTimeout(function() {
         // These things needto happen after the drop event.
         mostVisited.invalidate();
         mostVisited.layout();
         self.dragItem = null;
       }, 10);
     }
   },
 
   handleDrag: function(e) {
+    // Moves the drag item making sure that it is not displayed outside the
+    // browser viewport.
     var item = mostVisited.getItem(e.target);
     var rect = document.querySelector('#most-visited').getBoundingClientRect();
     item.style.pointerEvents = 'none';
 
-    item.style.left = this.startX + e.screenX - this.startScreenX + 'px';
-    item.style.top = this.startY + e.screenY - this.startScreenY + 'px';
+    var x = this.startX + e.screenX - this.startScreenX;
+    var y = this.startY + e.screenY - this.startScreenY;
+
+    // The position of the item is relative to #most-visited so we need to
+    // subtract that when calculation the allowed position.

[Miranda Callahan, 2009/08/19 22:49:02]

s/calculation/calculating

+    x = Math.max(x, -rect.left);
+    x = Math.min(x, document.body.clientWidth - rect.left - item.offsetWidth -
+                 2);
+    // The shadow is 2px
+    y = Math.max(-rect.top, y);
+    y = Math.min(y, document.body.clientHeight - rect.top - item.offsetHeight -
+                 2);
+
+    item.style.left = x + 'px';
+    item.style.top = y + 'px';
   },
 
   // We listen to mousedown to get the relative position of the cursor for dnd.
   handleMouseDown: function(e) {
     var item = mostVisited.getItem(e.target);
     if (item) {
       this.startX = item.offsetLeft;
       this.startY = item.offsetTop;
       this.startScreenX = e.screenX;
       this.startScreenY = e.screenY;
@@ skipping 12 matching lines @@
     el.addEventListener('dragover', bind(this.handleDragOver, this));
     el.addEventListener('dragleave', bind(this.handleDragLeave, this));
     el.addEventListener('drop', bind(this.handleDrop, this));
     el.addEventListener('dragend', bind(this.handleDragEnd, this));
     el.addEventListener('drag', bind(this.handleDrag, this));
     el.addEventListener('mousedown', bind(this.handleMouseDown, this));
   }
 };
 
 dnd.init();