使用jQuery拖动到一个区域时，用另一个替换元素

Question

我在解决这个问题时遇到了一些麻烦 - 如果没有更深入的javascript知识就可以这样做。

基本上，我使用jQueryUI来使元素可拖动。当在某个区域（使用位置）内拖动此元素时，我希望它变成另一个元素（两个元素都是div）。使用replace()执行此操作时出现的问题是新元素上没有draggable属性，并且其位置是拖动前原始元素位置的位置。哎呀，即使我在SO上找到了liveDraggable，我甚至无法让它成为可拖动的。

我可以通过替换一些CSS类和元素的内容来解决这个问题，但不知何故，感觉像“简单”目的需要太多的代码。

这是我目前使用类切换的代码：

$( ".toolbar-plugin").draggable({
    drag: function(event, ui) {
        $(this).css("position", "abolute");
        var pluginType = $(this).attr("id");
        var offsetYPos = parseInt(ui.offset.top);
        var offsetXPos = parseInt(ui.offset.left);
        if(offsetYPos > 80) {
            $(this).removeClass("toolbar-plugin ui-widget-header"); 
            $(this).addClass("floating-plugin ui-widget-content");
        }
    }
});

我已经在drop事件中看到过这样的事情，但我真的需要它在拖动时工作，而不是失去对拖动的“控制”。