ReplaceWith 和 jQuery 可拖放？

Question

我试图理解为什么

$('#title').replaceWith('ha'); 

在 jquery 的可放置脚本中可以在该区域之外工作

drop: function(event, ui) {}

，但在内部却无法工作。 具体来说，如果这样做，

$(".droppable").droppable({
drop: function(event, ui) {
    $('#title').replaceWith('ha'); 
     }

我会收到运行时错误（第 1102 行）data(...).options 为 null 或不是对象。 另外，如果我在 drop: 内插入 $('#title').append('ha'); ，它就会起作用。 但是，如果我将 $('#title').replaceWith('ha'); 放在它之外的任何其他地方，

$(".droppable").droppable({ /* */  });

它会起作用吗？

Answer 1

我将此作为答案发布，但实际上它更多的是对 Jon Erickson 答案的评论（我还没有评论的声誉点）。 18 个月后，这仍然是 IE 中的一个错误，我只是想通过建议 setTimeout() 来详细说明“如何在 drop 函数之外运行某些内容”部分，

我通过传递一个删除元素的匿名函数来解决这个问题setTimeout()。 根据您的捕捉或恢复设置，您可能还需要考虑隐藏可拖动项。

$(".droppable").droppable({
    drop: function(event, ui) {
        // do something interesting here...

        // now get rid of the draggable
        $(ui.draggable).hide();           
        setTimeout(function(){$(ui.draggable).remove();}, 1);
    }
});

Answer 2

id='title' 的元素是否也有 class='droppable'

我可以看看它是否试图删除一个会导致 drop 事件发生的元素，可能没有更多的元素可以使用，你可能会得到一个 '不是对象的错误。 如果没有亲自尝试的话，我不确定。

也许你可以做的是用一些虚拟类标记对象（jQuery的数据会更合适并且符合SRP，但这超出了这个答案的范围），然后在droppable的drop函数之外你可以做更换

类似...

$(".droppable").droppable({
    drop: function(event, ui) {
        // mark the element for replacement
        $('#title').addClass('replaceThisElement'); 
    }
});

// outside of the drop function
$('#title .removeThisElement').replaceWith('ha');