Question

这正在使用.sortable：

if ($(ui.item).find('.removeButton').length == 0){
    var removeButton = $('<span class="removeButton">X</span>').click(function(){
        $(this).remove();
        $(this).each(function(){
            $(this).appendTo($(this).attr('parentClass'));
        });
    });
    $(ui.item).append(removeButton);
};

但是我根本无法让它工作.draggable。我不能再使用.sortable，因为程序员使用.draggable来完成整个事情，所以我必须将其转换为一些方法。它似乎是一个相当简单的代码，所以我不知道为什么它不起作用。

HTML与具有两个区域的可排序类似，将一侧拖到另一侧。

<div id="source">
    <div id="su1">
      <h3></h3>
      <ul></ul>
    </div>
    ....
</div>
<div id="destination">
    <div id="su1">
      <h3></h3>
      <ul></ul>
    </div>
    ....
</div>

The working .sortable.

Answer 1

最好还使用类来拖动div，如下所示：

<div id="source">
    <div id="su1" class="source ui-state-default">
      <h3>Item 1</h3>
      <ul></ul>
    </div>
    <div id="su2" class="source ui-state-default">
      <h3>Item 2</h3>
      <ul></ul>
    </div>
    ...
</div> 
<div id="destination"> 
    <div id="su1" class="dest ui-state-highlight">
      <h3>Ìtem 1</h3>
      <ul></ul>
    </div>
    <div id="su2" class="dest ui-state-highlight">
      <h3>Ìtem 2</h3>
      <ul></ul>
    </div>
    ....
</div>

然后你可以创建如下内容。请注意，我使用sortable 不复制draggable功能。这将是相当多的复制工作，所以我留给你和“程序员”。这只是为了演示如何添加删除按钮，然后将其移回source div：

    $('.source').draggable({ revert: 'invalid' });
    $('.dest').draggable({ revert: 'invalid' });
    $('#destination').droppable({
        drop:function(ev, ui){
            var widget = $(this);
            if ($(ui.draggable).find(".removeButton").length == 0)
            {
                var removeButton = $("<span class='removeButton'>X</span>").click(function(){
                    var parentDiv = $(this).parent();
                    $(this).remove();
                    parentDiv.appendTo($('#source'))
                     $('#source div').appendTo($('#source'));
                });
                $('h3',ui.draggable).append(removeButton);
            }
        }
    });

在jQuery UI中如何将ui关闭按钮添加到可拖动的？

1 个答案: