9

2 つの並べ替え可能なリストがあります。このリストを接続して、アイテムをあるリストから別のリストに両方向に移動できるようにします。ソート可能な connectWith を使用していますが、リスト項目をあるリストから別のリストに移動することはできません。

また、アイテムをある場所から別の場所に移動できますが、同じリスト内にあります。

コードは次のとおりです。

<div class="category-container" data-id="1"> 
    <div class="category-header" data-id="1"> 
    </div>
    <ul class="list-items ui-sortable">
        <li class="item" data-id="3">
        <li class="item" data-id="43">
        <li class="item" data-id="28">
        <li class="item" data-id="24">
        <li class="item" data-id="21">
        <li class="item new" data-id="0">
    </ul>
</div>
<div class="category-container" data-id="2">
    <div class="category-header" data-id="2"> 
    </div>
    <ul class="list-items ui-sortable">
        <li class="item" data-id="17">
        <li class="item" data-id="8">
        <li class="item" data-id="9">
        <li class="item new" data-id="0">
    </ul>
</div>

そしてJQuery：

 $(".list-items").sortable({
            connectWith: '.list-items',
            items: "li:not(.item.new)",
            placeholder: 'place-holder',
            scroll: false,
            tolerance: "pointer"
}).disableSelection();

何が問題なのかわかりません。

誰かが私を助けることができますか？

ありがとう

4

4 に答える 4

17

わかった。

問題は、リストの float プロパティでした。ソート可能な connectWith は、CSS float では機能しません。

ソート可能な connectWith バグ

于 2013-02-07T11:22:27.673 に答える
1

まあ、私にとっては、リストは期待どおりに機能します..これを確認してください： http://jsfiddle.net/GSA2A/2/

また、有効な html を記述し、少なくともタグを閉じる必要があります。ほとんどのブラウザは、使用している Doctype に応じて、欠落している閉じた li 要素を処理できます。

以下も使用できます。

$('#list1, list2').sortable({.......

並べ替え可能な関数を ID で使用し、connectWith をこれらのリストを組み合わせたクラスで使用する方が、私にはより論理的に見えます。

于 2013-02-06T10:30:56.443 に答える
1

両方の ul を id に割り当てています。jQuery ファイルでは、両方の id を取得して sortable(); を使用しています。さまざまなパラメーターを適用すると、このコードを使用できます。私はjquery-3.1.1.jsを使用しています。

$('#list, #thi').sortable({
  containment: 'document',
  tolerance: 'pointer',
  cursor: 'pointer',
  revert: true,
  opacity: 0.4,
  connectWith: '#list,#thi',
  update: function() {
    // alert('f');
    content = $(this).text();
    $('#fdk').text(content);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list">
  <li>School</li>
  <li>Name</li>
  <li>Roll</li>
</ul>
<ul id="thi">
  <li>School</li>
  <li>Name</li>
  <li>Roll</li>
</ul>

<div id="fdk">
</div>

于 2016-12-31T08:46:07.877 に答える