Question

我正在开发一款需要拖放功能的应用。在下降时，所选择的可拖动需要保持存在但是被禁用。然后，新的“已删除”项目会附加一个“关闭”按钮。单击关闭按钮后，该项目将从“可放置”区域消失，并以可拖动的方式重新激活。

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

// 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

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

Answer 2

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

禁用后，jQuery UI在新功能中重新启用可拖动功能

2 个答案: