5

我有以下代码，它允许您在页面上拖放元素，并在成功拖放时运行一个名为 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);
                }
            });

计划是，一旦成功放置，它将删除拖动的项目并从放置的元素中删除可放置类，以防止其他元素也被放置在那里：

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 类......

任何想法为什么这不起作用？由于完整的代码库相当大（但不会直接影响这一点），我无法展示小提琴，但上面的示例应该足以解释这个问题，希望有一个解决方案。

4

3 回答 3

19

使用disable：

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

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

演示（使用破坏）

于 2012-08-07T16:18:38.787 回答
9

您可以使用：

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

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

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

于 2013-02-18T11:10:25.777 回答
3

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

//Get or set the disabled option, after init.
//getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
//setter
$( ".selector" ).droppable( "option", "disabled", true );
于 2013-01-29T05:32:32.980 回答