Improve the handling of the drop target marker when dragging items within the

grid. Originally the borders disappeared not they don't. A single element is
used to contain the drop target marker. This element contains all the position
information for the drop handler to determine where the item should be
positioned.

In addition, the drop target marker is removed when the drag extends outside
the grid and is re shown, when the cursor re-enters the thumbnail grid.

2 files changed, 77 insertions, 28 deletions

diff --git a/modules/organize/css/organize_theme.css b/modules/organize/css/organize_theme.css
index 4248f095..3d289755 100644
--- a/modules/organize/css/organize_theme.css
+++ b/modules/organize/css/organize_theme.css
@@ -6,6 +6,11 @@
 }
 
 #g-organize-microthumb-grid,
+#g-organize-drop-target-marker,
 .g-organize-album-text:hover {
   border-color: #79B7E7;
 }
+
+#g-organize-drop-target-marker {
+ background-color: #79B7E7;
+}
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index a89305f6..56377ce3 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -56,19 +56,11 @@
       tolerance: "pointer",
       greedy: true,
       drop: function(event, ui) {
-        var before_or_after = null;
-        var target_id = null;
-        if ($(".currentDropTarget").length) {
-          before_or_after = $(".currentDropTarget").css("borderLeftStyle") == "solid" ? "before" : "after";
-          target_id = $(".currentDropTarget").attr("ref");
-        } else {
-          before_or_after = "after";
-          target_id = $("#g-organize-microthumb-grid div:last").attr("ref");
-        }
+        var target = $("#g-organize-drop-target-marker").data("drop_position");
         $.organize.do_drop({
           url: rearrange_url
-          .replace("__TARGET_ID__", target_id)
-          .replace("__BEFORE__", before_or_after),
+          .replace("__TARGET_ID__", target.id)
+          .replace("__BEFORE__", target.before ? "before" : "after"),
           source: $(ui.helper).children("img")
         });
       }
@@ -120,14 +112,58 @@
       $.organize.set_handlers();
     },
 
-    mouse_move_handler: function(event) {
+    grid_mouse_leave_handler: function(event) {
+      if ($(".g-drag-helper").length && $("#g-organize-drop-target-marker").length) {
+        $("#g-organize-drop-target-marker").remove();
+      }
+    },
+
+    grid_mouse_move_handler: function(event) {
       if ($(".g-drag-helper").length) {
-        $(".g-organize-microthumb-grid-cell").css({borderStyle: "hidden", margin: "6px"});
-        $(".currentDropTarget").removeClass("currentDropTarget");
-        var borderStyle = event.pageX < $(this).offset().left + $(this).width() / 2 ?
-          {borderLeftStyle: "solid", marginLeft: "2px"} : {borderRightStyle: "solid", marginRight: "2px"};
-        $(this).addClass("currentDropTarget")
-          .css(borderStyle);
+        var cellSize = $("#g-organize").data("cellSize");
+        var thumbnailCount = $(".g-organize-microthumb-grid-cell:visible").length;
+        var rows = Math.ceil(thumbnailCount / cellSize.columns);
+
+
+        var itemPos = {
+          col: Math.floor((event.pageX - $(this).offset().left) / cellSize.width),
+          row: Math.floor((event.pageY - $(this).offset().top) / cellSize.height)
+        };
+        var itemIndex = itemPos.row * cellSize.columns + itemPos.col;
+
+        var item;
+        if (itemIndex < thumbnailCount) {
+          item = $(".g-organize-microthumb-grid-cell:visible").get(itemIndex);
+        } else {
+          item = $(".g-organize-microthumb-grid-cell:visible:last");
+        }
+
+        var old_position = {top: 0, left: 0};
+        if ($("#g-organize-drop-target-marker").length) {
+          old_position = $("#g-organize-drop-target-marker").position();
+        }
+        var before = event.pageX < ($(item).offset().left + $(item).width() / 2);
+
+        var left = (before && itemIndex < thumbnailCount ? $(item).position().left : $(item).position().left + cellSize.width) - 3;
+        var top = $(item).position().top + 6;
+
+        if (old_position.top != top || old_position.left != left) {
+          if ($("#g-organize-drop-target-marker").length) {
+            $("#g-organize-drop-target-marker").remove();
+          }
+          var set = $('<div id="g-organize-drop-target-marker"></div>')
+	    .css({zIndex: 2000,
+                  width: 2,
+                  height: 112,
+                  borderWidth: 1,
+                  borderStyle: "solid",
+                  position: "absolute",
+                  top: top,
+                  left: left
+	         })
+            .data("drop_position", {id: $(item).attr("ref"), position: before});
+          $("#g-organize-microthumb-grid").append(set);
+        }
       }
     },
 
@@ -140,7 +176,15 @@
       $(".sf-menu li.sfHover ul").css("z-index", 68);
       $("#g-dialog").dialog("option", "zIndex", 70);
       $("#g-dialog").bind("dialogopen", function(event, ui) {
-        $("#g-organize").height($("#g-dialog").innerHeight() - 20);
+        var outerHeight = $(".g-organize-microthumb-grid-cell").outerHeight(true);
+        var outerWidth = $(".g-organize-microthumb-grid-cell").outerWidth(true);
+        $("#g-organize")
+          .height($("#g-dialog").innerHeight() - 20)
+          .data("cellSize", {
+                  height: outerHeight,
+                  width: outerWidth,
+                  columns: Math.floor($("#g-organize-microthumb-grid").innerWidth() / outerWidth)
+          });
       });
 
       $("#g-dialog").bind("dialogclose", function(event, ui) {
@@ -162,11 +206,11 @@
     set_handlers: function() {
       $("#g-organize-microthumb-grid")
         .selectable({filter: ".g-organize-microthumb-grid-cell"})
+        .mousemove($.organize.grid_mouse_move_handler)
+        .mouseleave($.organize.grid_mouse_leave_handler)
         .droppable($.organize.content_droppable);
       $(".g-organize-microthumb-grid-cell")
-        .draggable($.organize.micro_thumb_draggable)
-        .mouseleave($.organize.mouse_leave_handler)
-        .mousemove($.organize.mouse_move_handler);
+        .draggable($.organize.micro_thumb_draggable);
       $(".g-organize-album").droppable($.organize.branch_droppable);
       $(".g-organize-album-text").click($.organize.show_album);
       $("#g-organize-album-tree .ui-icon-plus,#g-organize-album-tree .ui-icon-minus").click($.organize.toggle_branch);
@@ -214,12 +258,12 @@
       $(".g-organize-album-text[ref=" + id + "]").addClass("ui-state-focus");
       var url = $("#g-organize-microthumb-grid").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0);
       $.get(url, {},
-        function(data) {
-          $("#g-organize-microthumb-grid").html(data.grid);
-          $("#g-organize-sort-column").attr("value", data.sort_column);
-          $("#g-organize-sort-order").attr("value", data.sort_order);
-          $.organize.set_handlers();
-        },
+            function(data) {
+              $("#g-organize-microthumb-grid").html(data.grid);
+              $("#g-organize-sort-column").attr("value", data.sort_column);
+              $("#g-organize-sort-order").attr("value", data.sort_order);
+              $.organize.set_handlers();
+            },
 	    "json");
     },