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

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

然后您可以创建如下所示的内容。请注意，我没有使用 draggable 复制了 sortable 功能。复制这将是相当多的工作，所以我把它留给你和“程序员”。这只是为了演示如何添加删除按钮，然后将其移回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);
            }
        }
    });