Added javascript portion of the drop functionality. At this point you can drag selected images and drop them on the micro thumb grid in a different position or onto a branch in the gallery tree. No ajax call is made, it just writes the generated url and post data to the console, so it only works in ff right now.

3 files changed, 68 insertions, 30 deletions

diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index a1b59676..07c07286 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -46,23 +46,68 @@
       }
     },
 
-    droppable: {
+    content_droppable: {
       accept: "*",
       tolerance: "pointer",
       greedy: true,
       drop: function(event, ui) {
-        // @todo do a ajax call to send the rearrange request to the server
-        // organize/move/target_id/
-        // post parameters
-        //  before=id|after=id
-        //  source=[id1, id2, ...]
-        //  before or after not supplied then append to end
-        // return: json {
-        //   result: success | msg,
-        //   tree: null | new tree,
-        //   content: new thumbgrid
-        // }
-        // do forget to reset all the stuff in init when updating the content
+        $.organize.do_drop({
+          parent_id: $(".gBranchSelected").attr("ref"),
+          target_id: $(".currentDropTarget").attr("ref"),
+          position: $(".currentDropTarget").css("borderLeftStyle") == "solid" ? "before" : "after",
+          source: $(ui.helper).children("img")
+        });
+      }
+    },
+
+    branch_droppable: {
+      accept: "*",
+      tolerance: "pointer",
+      greedy: true,
+      drop: function(event, ui) {
+        $.organize.do_drop({
+          parent_id: $(event.target).attr("ref"),
+          target_id: -1,
+          position: "after",
+          source: $(ui.helper).children("img")
+        });
+      }
+    },
+
+    do_drop:function(drop_parms) {
+      var source_ids = "";
+      $(drop_parms.source).each(function(i) {
+        source_ids += (source_ids.length ? "&" : "") + "source_id[" + i + "]=" + $(this).attr("ref");
+      });
+      var url = drop_url.replace("__PARENT_ID__", drop_parms.parent_id)
+        .replace("__POSITION__", drop_parms.position)
+        .replace("__TARGET_ID__", drop_parms.target_id);
+
+      console.group("do_drop");
+      console.log("Generated url: " + url);
+      console.log("Post data(ids to move): " + source_ids);
+      console.groupEnd();
+      // @todo do a ajax call to send the rearrange request to the server
+      // organize/move/parent_id/before|after/-1|target_id
+      // post parameters
+      //  source=[id1, id2, ...]
+      //  before or after not supplied then append to end
+      // return: json {
+      //   result: success | msg,
+      //   tree: null | new tree,
+      //   content: new thumbgrid
+      // }
+      // do forget to reset all the stuff in init when updating the content
+    },
+
+    mouse_move_handler: function(event) {
+      if ($(".gDragHelper").length) {
+        $(".gMicroThumbGridCell").css("borderStyle", "hidden");
+        $(".currentDropTarget").removeClass("currentDropTarget");
+        var borderStyle = event.pageX < $(this).offset().left + $(this).width() / 2 ?
+          "borderLeftStyle" : "borderRightStyle";
+        $(this).css(borderStyle, "solid");
+        $(this).addClass("currentDropTarget");
       }
     },
 
@@ -88,27 +133,18 @@
         $("#gDialog").dialog("close");
       });
 
-      $(".gBranchText span").click($.organize.collapse_or_expand_tree);
-      $(".gBranchText").click($.organize.show_album);
-
       $("#gMicroThumbPanel").selectable({filter: ".gMicroThumbGridCell"});
-      $(".gOrganizeBranch").droppable($.organize.droppable);
-      $("#gMicroThumbPanel").droppable($.organize.droppable);
+      $("#gMicroThumbPanel").droppable($.organize.content_droppable);
 
       $.organize.set_handlers();
     },
 
     set_handlers: function() {
       $(".gMicroThumbGridCell").draggable($.organize.micro_thumb_draggable);
-      $(".gMicroThumbGridCell").mousemove(function(event) {
-        if ($(".gDragHelper").length) {
-          $(".gMicroThumbGridCell").css("borderStyle", "none");
-          console.log("pageX:" + event.pageX + ", offset.left:" + $(this).offset().left + ", width:" + $(this).width());
-          var side = event.pageX < $(this).offset().left + $(this).width() / 2 ?
-            "hidden hidden hidden solid" : "hidden solid hidden hidden";
-          $(this).css("borderStyle", side);
-        }
-      });
+      $(".gMicroThumbGridCell").mousemove($.organize.mouse_move_handler);
+      $(".gOrganizeBranch").droppable($.organize.branch_droppable);
+      $(".gBranchText span").click($.organize.collapse_or_expand_tree);
+      $(".gBranchText").click($.organize.show_album);
     },
 
     /**
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index f8d6d792..982eba9e 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -1,4 +1,7 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
+<script type="text/javascript">
+  var drop_url = "<?= url::site("organize/drop/__PARENT_ID__/__POSITION__/__TARGET_ID__?csrf=$csrf") ?>";
+</script>
 <div id="gOrganize" class="gDialogPanel">
   <h1 style="display:none"><?= t("Organize %name", array("name" => p::purify($title))) ?></h1>
   <div id="bd">
diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php
index b41c54e8..671e0ce4 100644
--- a/modules/organize/views/organize_thumb_grid.html.php
+++ b/modules/organize/views/organize_thumb_grid.html.php
@@ -1,9 +1,8 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <? foreach ($item->children(25, $offset) as $child): ?>
-<li class="gMicroThumbGridCell">
+<li class="gMicroThumbGridCell" ref="<?= $child->id ?>">
 <div id="gMicroThumb_<?= $child->id ?>"
-    class="gMicroThumb <?= $child->is_album() ? "gAlbum" : "gPhoto" ?>"
-    ref="<?= $child->id ?>">
+    class="gMicroThumb <?= $child->is_album() ? "gAlbum" : "gPhoto" ?>">
   <?= $child->thumb_img(array("class" => "gThumbnail", "ref" => $child->id), 90, true) ?>
 </div>
 </li>