2

移動したアイテムにボタンを追加したいのですが、クリックするとリストからアイテムが削除され、元の位置に戻ります。このプラグインには私が探している機能がありますが、私は一日中検索していて、これが.sortableにないようです。

私が構造として持っているのは：

<ul class="sortable">
  <li class="parent old">
    <h3 class="heading">User 1</h3>
    <a class="remove">X</a>
    <ul class="sortable">
      <li class="ui-state-default old">
        <h3>My Image</h3>
      </li>
      <li class="ui-state-default old">
        <h3>My Image 2</h3>
      </li>
    </ul>
  </li>
</ul>

これがjsです：

$('.sortable').sortable({
    connectWith: [".newList"],
    handle: "h3",
    cursor: "move",
    placeholder: "placeHolder",
    opacity: 0.5,
    items: ".old",
    clone: "helper",
    revert: true
});
$('.remove').click(function(){
    $(this).prevAll('.parent:first').remove();
});

さまざまなことを試してみると、.sortable（ "destroy"）を正常に呼び出すことができますが、元のリストに再び表示されない場合は効果がありません。私がこのフィドルでここで見てきた別の可能な（理想的ではない）解決策があります。基本的に、この解決策についての私の考えは、ボタンに破棄を追加することであり、それは常に元のリストにあります。ここでの問題は、少なくともこれを元のリストから非表示にして、対応するアイテムが新しいリストから破棄された場合に表示する必要があるということです。したがって、理想的には、可能であれば.sortableを使用してこれを実行したいと思います。

4

1 に答える 1

3

jQueryのSortableの例から借りると、それはあなたが望むものと非常によく似たものが可能であるように思われます。

キーは、SortableのconnectWithプロパティにあります。このプロパティは一方向に設定できます。これにより、必要に応じてアイテムをセカンダリリストにドラッグできるようにしながら、維持できる特定の並べ替えで初期リストを設定できます。例： http： //jsfiddle.net/rvAgL/

html：

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Item 1</li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>​

js：

$(function() {
        $( '#sortable1').sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
        $('#sortable2').sortable({
            update:function(ev, ui){
                var widget = $(this);
                var removeButton = $("<span>X</span>").click(function(){
                    var parentLi = $(this).parent();
                    $(this).remove();
                    parentLi.appendTo($('#sortable1'))
                     $('#sortable1 li').sort(asc_sort).appendTo($('#sortable1'));
                });
                $(ui.item).append(removeButton);
            }
        }).disableSelection();

    function asc_sort(a, b){
        return ($(b).text().toUpperCase()) < ($(a).text().toUpperCase());    
    }

});​

少しcss：

 #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; cursor:pointer }​
于 2012-12-04T22:49:59.707 に答える