Question

好的，我有拖放问题。

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

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代码。当我保存撤消时，我需要删除所有其他类和元素我的函数来拖放添加。因为当他们点击撤消并且不想要拖动手柄和我的边框时，他们可能不在排序区域中，所以我将其设置为刚出现的视觉辅助工具。

所以现在我有：

$(".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);
    }
});

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

错误：在初始化之前无法调用droppable上的方法; 试图调用方法'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是最小值，任何低于它的误差。但是第一个不会工作，无论我做多长时间或多长时间。

真的希望这是有道理的。

Answer 1

也许如果我使用

    var draggable = ui.draggable, droppable = $(this);
    draggable.swap(droppable);

相反它会起作用。 o.O

创建Drag＆amp; Drop，Destory，Save重新创建 - jQuery

1 个答案: