可拖动附加到droppable，然后拖动来自其他地方

Question

我将一个元素放在可放置区域的可放置区域中，然后它应该只放在那里，但元素来自屏幕顶部。

$('.fr12drag').draggable({ 
    containment: ".class",
    revert: true,           
    revertDuration: 400,
    drag: function(event, ui){
        $('#id').hide();
    }
});

$('.fr12drop').droppable({
    drop: function(event,ui) {
        ui.draggable.detach().appendTo($(this));
        var left = 0, top = 0;

        left =  parseInt($(this).css("left"))
        top = parseInt($(this).offset().top);

        ui.draggable.css('cursor', 'auto');
        ui.draggable.position({
            my: "center",
            at: "center",
            of: $(this),
            using: function(pos) {
                $(this).animate(pos, "fast", "linear");
            }
        }); 
    }       
});

这是我添加的行。

可以在以下链接中查看参考。 https://jsfiddle.net/unjhocog/