jQuery UI 在禁用后重新启用新函数中的可拖动功能

Question

我正在开发一个需要拖放的应用程序。放置后，选定的可拖动对象需要保持存在但会被禁用。然后，新的“已删除”项目会附加一个“关闭”按钮。单击关闭按钮后，该项目将从“可放置”区域消失并重新激活为可拖动。

问题是，一旦我禁用可拖动（成功放置后），我就无法在单独的“删除”功能中重新启用该唯一项目。这里有一些示例代码 - 为了简单起见，很多代码都被删除了，希望就我遇到的这个特定问题获得建议。

// DROP: initiate droppables  

    $(".droppable").droppable({
            hoverClass: 'drag-state-hover',
            accept: '.draggable li img',
            tolerance: 'fit',
            drop: function(event, ui) {

                var elementID = $(ui.draggable).attr("id") // get the dynamically set li id for each list item chosen

                if(    $(this).children('img').attr('src') == 'images/elements/blank.gif'  ) {

                    // disable the element once it's been dragged and dropped
                    $(ui.draggable).draggable( 'option', 'disabled', true );
                    // turn on the remove link
                    $(this).find('a.remove').toggle();                                       

                }                                                                          

            }                                                                               
        });       



    // ITEM REMOVE: function for removing items
    $('.remove').click(function(e) {

            var targetID = $(this).parent('li').attr('id');
            $('#' + targetID).children('img').draggable( 'option', 'disabled', false );

            e.preventDefault();

        });

我也尝试过这个，但没有成功......

// ITEM REMOVE: function for removing items
$('.remove').click(function(e) {

        var targetID = $(this).parent('li').attr('id');

        $(".droppable").droppable({
            hoverClass: 'drag-state-hover',
            accept: '.draggable li img',
            tolerance: 'fit',
            drop: function(event, ui) {                           
                $(ui.draggable).draggable( 'option', 'disabled', false );                                                   
            }                                                                               
        });                                                               

        e.preventDefault();

    });

我花了几天时间在谷歌上搜索解决方案，但此时我正在碰头。任何帮助将不胜感激。谢谢！！

Answer 1

您可以使用 .draggable( 'enable' ); ，而不是使用 .draggable( 'option', 'disabled', false ); 。我不知道这是否能解决您的问题，但这就是我开始调试它的方式。

Answer 2

在您的删除功能中，您是否尝试过将元素重新实例化为可拖动元素？ $('#' + targetID).children('img').draggable{}