Repair dragged images

app/assets/javascripts/gallery.js

@@ -99,6 +99,30 @@ function form_only_one_submit() {
 
 $(function () {
   'use strict';
+  
+  // ==========================================
+  // 修正：解決瀏覽器 Passive Event 導致跳轉的問題
+  // ==========================================
+  var forceStopAndAdd = function(e) {
+    // 檢查事件是否發生在 fileupload 相關區域內
+    if ($(e.target).closest('#fileupload, #dropzone').length > 0) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (e.type === 'drop') {
+        var files = e.originalEvent ? e.originalEvent.dataTransfer.files : e.dataTransfer.files;
+        if (files && files.length > 0) {
+          $('#fileupload').fileupload('add', {files: files});
+        }
+      }
+    }
+  };
+
+  // 必須用原生 JS 掛載以支援 { passive: false }
+  window.addEventListener('dragover', forceStopAndAdd, { capture: true, passive: false });
+  window.addEventListener('drop', forceStopAndAdd, { capture: true, passive: false });
+  // ==========================================
+
   // Initialize the jQuery File Upload widget:
   if($('#fileupload').length){
     $('#fileupload').fileupload({
@@ -111,6 +135,7 @@ $(function () {
     });
   }
 });
+
 Array.prototype.uniq = function(){
   var attr = this
   attr = $.grep(attr, function(v, k){
@@ -216,10 +241,6 @@ $(function() {
     $img = $('.rgalbum img');
     $('.rgalbum > a').rsImg();
     if($containerData.galleryId == 'gallery') {
-      // $container.masonry({
-      //  itemSelector : '.rgalbum',
-      //  isAnimated: true,
-      // });
       $albumname.each(function(i) {
         var $albumblock = $(this).closest('a').height(),
           $H = $(this).outerHeight(true);
@@ -271,7 +292,7 @@ $(function() {
   var bindEvent = function(instance,elem){
     var $e = elem,
     image_id = $e.closest(".rgalbum").data("image-id");
-    obj = photosData.galleries.filter(function(a) {
+    var obj = photosData.galleries.filter(function(a) {
             return a.id == image_id;
           })[0];
     switch($e.attr("for")){
@@ -309,7 +330,7 @@ $(function() {
         instance.find('.tags-groups').cardCheck({
               item: '.card'
           });
-          for(i = 0; i < obj.tags.length; i++){
+          for(var i = 0; i < obj.tags.length; i++){
             instance.find("input[value="+obj.tags[i]+"]").parent().addClass('active');
             instance.find("input[value="+obj.tags[i]+"]").prop("checked","checked");
           }
@@ -451,9 +472,7 @@ $(function() {
     return false;
   })
 
-    // 
-
-    var last_image_id = null;
+  var last_image_id = null;
   $('.add-imgs').on({
     click: function() {
       $('#fileupload').slideToggle(300, function() {
@@ -495,7 +514,7 @@ $(function() {
         var $e = $(data);
         $imgs = $e.find("img");
         $("#imgholder").prepend($e);
-        $os = $e.find("a.open");
+        var $os = $e.find("a.open");
         $os.pageslide({
           W: '40vw',
           loadComplete: function(instance,elem) {
@@ -510,7 +529,7 @@ $(function() {
   var op_fn1 = function() { 
     var check_img = $('#imgholder').find("input[type='checkbox']:checked").parents('li').find('img');
     check_img.each(function(){
-            check_img.css('transform','rotate('+$('#show_degree').text()+'deg)');
+            $(this).css('transform','rotate('+$('#show_degree').text()+'deg)');
         });
   }
   var op_fn2 = function() { 
@@ -544,5 +563,4 @@ $(function() {
         hide: "explode",
         buttons: buttons_option
     });
-});
-
+});