Question

我有以下代码，允许您在页面上拖放元素，并且在成功删除时，它运行一个名为saveRatings的方法，传递元素的ID。

            $('.draggable').draggable({
                revert: true
            });


            $('.droppable').droppable({
                drop: function( event, ui ) {
                    draggedID = ui.draggable.attr("id");
                    droppedID = $(this).attr("id");
                    Global.showLoader('Saving...');
                    quiz1.saveRatings(draggedID, droppedID);
                }
            });

计划是，一旦成功删除，它将删除被拖动的项目并从被删除的元素中删除droppable类，以防止其他元素被丢弃：

saveRatings: function ( choiceId, ratingId ) {

                // Hide the dragged choice
                $('div#' + choiceId).hide();

                // Remove droppable behaviour
                $('div#' + ratingId).removeClass('ui-droppable');
                $('div#' + ratingId).removeClass('droppable');
                $('div#' + ratingId).addClass('done');

}

删除部分工作正常，删除类但元素仍然允许其他人被删除...即使我已从元素中删除了droppable和ui-droppable类...

为什么这不起作用的任何想法？我无法表现出一个小提琴，因为完整的代码库相当大（但并没有直接影响到这一点）但是上面的例子应该足以解释这个问题的解决方案。

Answer 1

使用disable：

$('#' + ratingId).droppable('disable')

此外，在按ID选择时，您无需指定'div#'，因为ID是唯一的。

Demo（使用销毁）

Answer 2

您可以使用：

$('#' + ratingId).droppable('destroy')

这将永久删除元素中的可放置行为。如果要重新初始化它，只需使用与首次初始化时相同的初始化代码再次使元素可以删除。

有关详细信息，请参阅文档：http://api.jqueryui.com/droppable/#method-destroy

Answer 3

接受的答案中的解决方案打破了droppaple，这意味着它似乎只是禁用了它。但是如果你这样做，你不能在以后再次启用它。根据{{3}}，在不破坏元素的情况下执行此操作的正确方法是：

//Get or set the disabled option, after init.
//getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
//setter
$( ".selector" ).droppable( "option", "disabled", true );

使用jQuery UI删除成功时可删除的功能

3 个答案: