Fixing media UI glitches

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

--HG--
branch : 1.x
This commit is contained in:
Sebastien Ros 2013-05-30 12:30:31 -07:00
parent 4eb0cbf57a
commit cfd4f2a948
2 changed files with 9 additions and 3 deletions

View File

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

View File

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