jQuery - допуск: «подгонка» droppable не заботится о границе установки droppable

Question

Я разрабатываю небольшой инструмент, и он работает до сих пор, но я вмешиваюсь в то, что droppable (с возможностью «толерантности») установленный в «fit»), очевидно, не заботится о границе droppable.

Смотрите здесь: http://jsfiddle.net/scraddy/8geEB/20/

Соответствующие Javascript извлечена из скрипкой:

$("#dropzone").droppable({ 
    hoverClass: "ui-drop-hover", 
    tolerance: "fit", 
    drop: function(event, ui) { 
     $("#dropzone p").hide(); 
     $("#pix img").draggable("disable").hover(function() { 
      $(this).css({ 
       cursor: "default" 
      }); 
     }); 
    } 
}); 

$("#pix img").draggable({ 
    cursor: "move", 
    revert: "invalid", 
    helper: "clone", 
    stop: function(event, ui) { 
     if ($("#dropzone p").is(":hidden")) { 
      $(ui.helper).clone().appendTo($("#dropzone")).resizable({ 
       handles: 'se', 
       maxHeight: 200, 
       minHeight: 25, 
       aspectRatio: true, 
       ghost: true, 
       autoHide: true, 
       stop: function(event, ui) { 
        var ximg = ui.position.left + ui.size.width; 
        var xdrop = $("#dropzone").offset().left + $("#dropzone").width(); 
        var yimg = ui.position.top + ui.size.height; 
        var ydrop = $("#dropzone").offset().top + $("#dropzone").height(); 
        if (ximg > xdrop || yimg > ydrop) { 
         $(this).position({ 
          my: "right bottom", 
          at: "right bottom", 
          of: "#dropzone", 
          offset: ((xdrop - ximg) < 0 ? 0 : -(xdrop - ximg)) + " " + ((ydrop - yimg) < 0 ? 0 : -(ydrop - yimg)) 
         }); 
        } 
       } 
      }).parent().draggable({ 
       disabled: false, 
       helper: "original", 
       containment: "#dropzone", 
       create: function(event, ui) { 
        if ($("#testing").size() === 0) { 
         $("#dropzone div.ui-wrapper").append('<img id="testing" src="http://palmenhandel-witten.de/img/close.png" width="16" height="16" alt="Bild entfernen" />'); 
         $("img#testing").click(function() { 
          $("#dropzone p").fadeIn(350); 
          $("#dropzone div.ui-wrapper").resizable('destroy').draggable('destroy'); 
          $(".ui-draggable-dragging").fadeOut(350, function() { 
           $(this).remove() 
          }); 
          $("#pix img").draggable("enable").hover(function() { 
           $(this).css({ 
            cursor: "move" 
           }); 
          }); 
         }); 
        } 
        $("#dropzone div.ui-wrapper").bind("mouseenter mouseleave", function(event) { 
         $("img#testing").toggleClass("over"); 
        }); 
       } 
      }); 
     } 
    } 
}).hover(function() { 
    $(this).css({ 
     cursor: "move" 
    }); 
}); 

При перетаскивании изображения на Droppable должно быть принято только тогда, когда это совершенно над Droppable и ни одна часть его над граница падающей границы. Конечно, граница относится к droppable, но я спрашиваю себя, может быть, обходной путь для этого?

Я думал о том, чтобы вручную переместить draggable после падения, но это будет громоздким, я думаю.

Answer 1

Я решил проблему с ручной перестановкой перетаскиваемого после добавления в droppable. Вот отредактированная скрипка: http://jsfiddle.net/scraddy/8geEB/27/