[NTP] Tweak app drag and drop.

chrome/browser/resources/ntp/drag_drop_controller.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // The delegate interface:
 //   dragContainer -->
 //         element containing the draggable items
 //
 //   transitionsDuration -->
 //         length of time of transitions in ms
@@ skipping 37 matching lines @@
     el.addEventListener('dragleave', this.handleDragLeave_.bind(this));
     el.addEventListener('drop', this.handleDrop_.bind(this));
     el.addEventListener('dragend', this.handleDragEnd_.bind(this));
     el.addEventListener('drag', this.handleDrag_.bind(this));
     el.addEventListener('mousedown', this.handleMouseDown_.bind(this));
   },
 
   getCoordinates_: function(e) {
     var rect = this.delegate_.dragContainer.getBoundingClientRect();
     var coordinates = {
-      x: e.clientX + window.scrollX - rect.left,
-      y: e.clientY + window.scrollY - rect.top
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
     };
 
     // If we're in an RTL language, reflect the coordinates so the delegate
     // doesn't need to worry about it.
     if (isRtl())
       coordinates.x = this.delegate_.dragContainer.offsetWidth - coordinates.x;
 
     return coordinates;
   },
 
   // Listen to mousedown to get the relative position of the cursor when
   // starting drag and drop.
   handleMouseDown_: function(e) {
     var item = this.delegate_.getItem(e);
-    if (!item)
+    if (!item) {
+      e.preventDefault();
       return;
+    }
 
     this.startX_ = item.offsetLeft;
     this.startY_ = item.offsetTop;
     this.startScreenX_ = e.screenX;
     this.startScreenY_ = e.screenY;
 
     // We don't want to focus the item on mousedown. However, to prevent
     // focus one has to call preventDefault but this also prevents the drag
     // and drop (sigh) so we only prevent it when the user is not doing a
     // left mouse button drag.
     if (e.button != 0) // LEFT
       e.preventDefault();
   },
 
   handleDragStart_: function(e) {
     var item = this.delegate_.getItem(e);
     if (!item)
       return;
 
     // Don't set data since HTML5 does not allow setting the name for
     // url-list. Instead, we just rely on the dragging of link behavior.
     this.delegate_.dragItem = item;
     item.classList.add('dragging');
+    item.style.zIndex = 2;
 
     e.dataTransfer.effectAllowed = 'copyLinkMove';
   },
 
   handleDragEnter_: function(e) {
     if (this.delegate_.canDropOn(this.getCoordinates_(e)))
       e.preventDefault();
   },
 
   handleDragOver_: function(e) {
@@ skipping 11 matching lines @@
       e.preventDefault();
   },
 
   handleDrop_: function(e) {
     var dragItem = this.delegate_.dragItem;
     if (!dragItem)
       return;
 
     this.delegate_.dragItem = null;
     this.delegate_.saveDrag();
+    dragItem.classList.remove('dragging');
 
     setTimeout(function() {
-      dragItem.classList.remove('dragging');
+      dragItem.style.zIndex = 0;
     }, this.delegate_.transitionsDuration + 10);
   },
 
   handleDragEnd_: function(e) {
     return this.handleDrop_(e);
   },
 
   handleDrag_: function(e) {
     // Moves the drag item making sure that it is not displayed outside the
     // browser viewport.
@@ skipping 12 matching lines @@
     // The shadow is 2px
     y = Math.max(-rect.top, y);
     y = Math.min(y, document.body.clientHeight - rect.top -
                     dragItem.offsetHeight - 2);
 
     // Override right in case of RTL.
     dragItem.style.left = x + 'px';
     dragItem.style.top = y + 'px';
   }
 };