javascript - jQuery droppable 对象执行 destroy() 但抛出错误

Question

当我运行这个

$('#tgsBox1').droppable({
    accept: "#tgsSquirrel",
    drop: function(e, ui) {
        ui.draggable.animate({
            left: $(this).position().left + 25,
            top: $(this).position().top + 131
        }).destroy();
    }
});

可拖动元素实际上已被销毁(不再可拖动)，但它给出了错误:

TypeError: ui.draggable.animate(...).destroy is not a function
ui.draggable.animate({

看起来与旧线程相似:jquery ui error for ui.draggable("destroy") ，但假设的解决方案(更新 jQuery-ui)并不能解决这个问题。

Answer 1

在 jQuery ui 可拖动小部件中调用方法的语法是:

$( ".selector" ).draggable( "method" );

对于destroy : $( ".selector").draggable( "destroy");

尝试按如下方式调用该方法:

$('#tgsBox1').droppable({
  accept: "#tgsSquirrel",
  drop: function(e, ui) {
    ui.draggable.animate({
        left: $(this).position().left + 25,
        top: $(this).position().top + 131
    }).draggable("destroy");
  }
});

它不再可拖动的原因可能是因为脚本执行因错误而停止。

您可能还想在动画完成后销毁可拖动对象:

$('#tgsBox1').droppable({
  accept: "#tgsSquirrel",
  drop: function(e, ui) {
    ui.draggable.animate({
        left: $(this).position().left + 25,
        top: $(this).position().top + 131
    },function(){
       ui.draggable.draggable("destroy");
    });
  }
});