Fixing media UI glitches

- drag and drop was contained in the list
- drag and drop anchor is now the pointer

--HG--
branch : 1.x

src/Orchard.Web/Modules/Orchard.MediaLibrary/Styles/orchard-medialibrary-admin.css

@@ -68,6 +68,7 @@
 
     .media-library-folder-title {
         box-sizing: border-box;
+        -moz-box-sizing: border-box;
         border: 2px solid transparent;
         width: 100%;
     }
@@ -310,10 +311,12 @@
         display: none;
     }
 
-    .ui-draggable-dragging {
-        z-index: 3000;
+    /* the draggable element*/
+    .dragged-selection {
+        z-index: 3000; /* above the checkmark */
     }
 
+    /* the element representing the number of selected elements in the dragged element */
     .draggable-selection {
         position: absolute;
         top: 25%;

src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/Admin/Index.cshtml

@@ -340,6 +340,7 @@
                     $(ui.helper).removeClass('over');
                     $(this).removeClass('dropping');
                 },
+                tolerance: "pointer",
                 drop: function(event, ui) {
                     $(this).removeClass('dropping');
                     var targetId = $(this).data('term-id');
@@ -383,8 +384,9 @@
                         revert: 'invalid',
                         //containment: 'li',
                         helper: function(event) {
-                            var clone = $(event.currentTarget).clone();
+                            var clone = $(event.currentTarget).clone().removeAttr('id');
                             clone.removeClass('selected');
+                            clone.addClass('dragged-selection');
                             
                             if (viewModel.selection().length > 1) {
                                 clone.append($('<div class="draggable-selection"><p>' + viewModel.selection().length + '</p></div>'));
@@ -395,6 +397,7 @@
                         },
                         cursor: 'move',
                         distance: 10, 
+                        appendTo: 'body',
                         create: function() {
                             // position the handler a little left to the center to let the number of selected items to appear
                             $(this).draggable("option", "cursorAt", { left: $(this).width() / 2 - 20, top: $(this).height() / 2 });