diff options
| -rw-r--r-- | modules/organize/css/organize_theme.css | 5 | ||||
| -rw-r--r-- | modules/organize/js/organize.js | 100 |
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"); }, |