1

これは .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 ではまったく動作しません。プログラマーが代わりに .draggable を使用して全体を作成したため、.sortable を使用できなくなったため、何らかの方法で変換する必要があります。かなり単純なコードのように見えるので、なぜ機能しないのかわかりません。

HTML は 2 つの領域を持つソート可能なものに似ており、一方の側をもう一方の側にドラッグします。

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

作業中の .sortable.

4

1 に答える 1

0

次のように、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>​

次に、次のようなものを作成できます。を使用して機能を複製していないことに注意してください。これを複製するにはかなりの作業になるので、あなたと「プログラマー」に任せます。これは、削除ボタンを追加してからdivに戻す方法を示すためのものです。sortabledraggablesource

    $('.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);
            }
        }
    });
于 2012-12-10T18:38:12.343 に答える