创建阻力&删除，目的地，保存重新创建-jQuery

好的，我有一个拖放问题。

他们所做的，他们点击一个按钮，它初始化整个拖放。

function sortElements() {               
    // Place droppable elements
    var x = 0;
    $("#content-body div[data-type='column'],#content-body div[data-type='carousel']").each(function() {
        var el = $(this);
        if(x == 0){
            el.before('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><'/div>');
            x++;
        }
        el.addClass('edit_el').after('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><'/div>');
        x++;
        el.append('<div class="drag-handle"><i class="fa fa-arrows"></i></div>');
        var w = el.width();
        el.css('width',w+'px');
    });
    $("#content-body div[data-type='insertable']").each(function() {
        var el = $(this);
        el.prepend('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><'/div>');
        x++;
    });
    // Swap entire columns
    $("#content-body div[data-type='column']").draggable({
        refreshPositions: true,
        helper: "clone",
        handle:'.drag-handle',
        appendTo: "body",
        zIndex: 10000,
        start: function( event, ui ) {
            $(".neoDroppableEle").addClass('dragging');
        },
        stop: function( event, ui ) {
            $(".neoDroppableEle").removeClass('dragging');
        }
    });
    $(".neoDroppableEle").droppable({
        accept: "div[data-type='column']",
        tolerance: "pointer",
        hoverClass: "focus_in",
        activeClass: "focus_in_active",
        drop: function(event, ui) {
            cur_ele = this.id;
            var el = ui.draggable;
            var html = el.html();
            el.remove();            
            $("#" + cur_ele).replaceWith('<div class="row" data-type="column">'+html+'</div>');
        }
    });
    // Swap individual photos within columns
    $("#content-body div[data-type='imagewrap']").each(function(){
        $(this).draggable({ 
            revert: "invalid", 
            helper: "clone" ,
            zIndex: 10001,
        });
        $(this).droppable({
            accept: "div[data-type='imagewrap']",
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {       
                var draggable = ui.draggable, droppable = $(this);
                draggable.swap(droppable);
            }
        });
    });
}

完成后，他们再次单击按钮。

function sortElementsComplete() {
    $(".ui-droppable").droppable("destroy");
    $(".ui-draggable").draggable("destroy");
    $(".edit_el").removeAttr('style').removeClass('edit_el');
    $(".neoDroppableEle").remove();
    $(".drag-handle").remove();
}

这一切运行和工作都很棒！

但现在我正在尝试在每次拖放后保存HTML代码以进行撤消。当我保存撤销时，我需要删除所有其他类和元素，我的函数可以拖放add。因为当他们单击"撤消"时，他们可能不在排序区域中，并且不希望拖动手柄和我设置为视觉辅助的边框出现。

所以现在我有了：

$(".neoDroppableEle").droppable({
    accept: "div[data-type='column']",
    tolerance: "pointer",
    hoverClass: "focus_in",
    activeClass: "focus_in_active",
    drop: function(event, ui) {
        cur_ele = this.id;
        var el = ui.draggable;
        var html = el.html();
        el.remove();            
        $("#" + cur_ele).replaceWith('<div class="row" data-type="column">'+html+'</div>');
        setTimeout(function(){
            sortElementsComplete();
            editor_add();
        },1000);
    }
});

上面的超时代码总是失败：

错误：无法在初始化之前调用可丢弃的方法；试图调用方法"destroy">

怎么会这样？它已初始化并正在运行。删除后，我应该能够销毁它，保存并重建它。使用disable会出现同样的错误。对我来说，这个错误毫无意义。

在运行editor_add((后，它会重新构建他们正在做的任何事情，在这种情况下，它会激发sortElements((；保存之后。

但是下面的运行良好？

// Swap individual photos within columns
$(this).droppable({
    accept: "div[data-type='imagewrap']",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {       
        var draggable = ui.draggable, droppable = $(this);
        draggable.swap(droppable);
        setTimeout(function(){
            sortElementsComplete();
            editor_add();
        },250);
    }
});

如果我没有上面的超时，它会出错。似乎250是最小值，任何低于它的值都会出错。但第一个永远不会起作用，无论我暂停的时间长短。

真希望这是有道理的。