如果droppable的底部在父级的顶部上方或droppable的顶部在父级的下方，请检查droppable元素与父级容器的界限，并中断函数的执行.底部:

Check the droppable element's bounds against the parent container and break the execution of the function if the droppable's bottom is above the parent's top or the droppable's top is beneath the parent's bottom:

$('.item').droppable( {
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: "#draggable",
    drop: function( event, ui ) {
        var cTop = $(this).closest(".box").position().top + parseInt($(this).closest(".box").css("margin-top"));
        var cBtm = $(this).closest(".box").position().top + parseInt($(this).closest(".box").css("margin-top")) + $(this).closest(".box").height();
        var dTop = $(this).position().top + parseInt($(this).css("margin-top"));
        var dBtm = $(this).position().top + parseInt($(this).css("margin-top")) + $(this).height()

        if (dBtm > cTop && dTop < cBtm) {
            alert("Dropped.");
        }
    }
});

示例: http://jsfiddle.net/lthibodeaux/2p56Y/6/

我意识到它并不优雅，但似乎可行.我承认只对该脚本进行了粗略的测试.

I realize it's not elegant, but it seems workable. I admit to only cursory testing of this script.