2

要素のリストが2つあり、両方でjQueryUIを並べ替え可能にしました。このオプションを使用してconnectWith、2つのリスト間をドラッグできるようにしました。

1つのリストには多くの要素が含まれているので、追加overflow-y: scrollしました。カスタムhelper関数を使用して、要素をドラッグするときにページ全体をスクロールできるようにしました。

helper: function(event, element){
    // From: http://stackoverflow.com/a/8512783/206403
    return element.clone().appendTo('body');
}

トップリストに要素がない場合、要素をそのリストにドラッグするのは非常に困難です。トップリストにすでに要素がある場合は、正常に機能します。

これがデモです：http：//jsfiddle.net/MCcuc/5/。下にスクロールして、「アイテムQ」（赤いリストの下から）を緑のリストに移動してみます（要素を緑のリストの上に移動してから、もう一度元に戻します）。グリーンリストに添付するのは簡単ではないことがわかります。

それは私の機能と関係があると思いhelperます。最初の要素をグリーンリストにドラッグできるようにするにはどうすればよいですか？

4

4 に答える 4

2

それが役立つかどうかはわかりませんが、私が見つけたのは、「実際の」問題は、プレースホルダーが消えた時点ではなく、より早く始まるということです。何が起こるかというと、内側のスクロールバーはスクロールしませんが、バックグラウンドでは、カーソルの位置が非アクティブリストでの並べ替えをトリガーします。したがって、視覚的にはアイテムはアクティブリストの上にありますが、その位置は非アクティブリストの最初の2つの要素の上にあります。ただし、視覚的な「オーバー」配置のため、プレースホルダーはすでにアクティブリストに含まれています。したがって、ポジションが非アクティブリストの最初のアイテムの「仮想ポジション」を離れると、プレースホルダーは削除されます。残念ながら、この時点では、非アクティブリストではなくアクティブリストに含まれています。

つまり、「問題は早く始まる」とは、プレースホルダーを非アクティブリストに残して、アクティブリストに移動するのが早すぎるのではなく、上にスクロールする必要があるということです。これはおそらく必要なことです。最初にスクロールバーを使用します。次に、リストのスクロールバーを使用します。ただし、これは、移動するヘルパーアイテムが、その上にある場合は古いリストの子要素であり、古いリストの領域を離れる場合は「本体」の子になるという要件を意味します。

私はあなたがそれをすることができないと思います（このプラグインで）。

可能性のあること：非アクティブリスト内で再配置したくないが、ページスクロールでアイテムをアクティブリストに移動するだけの場合。この場合、たとえば「out」イベントを使用し、それがトリガーされたときに非アクティブリストを上にスクロールすることができます。残念ながら、「out」イベントは、最初にトリガーされるはずのときにトリガーされないようです。バグのようです:(

...
appendTo: 'body',
helper: 'clone',
out: function() {$('#Inactive')[0].scrollTop = 0;},
...

更新：回避策が見つかりました。私はそれを磨いていません（特別な場合：プレースホルダーがリストの最初の項目である場合）が、これはアイデアです：

appendTo: 'body',
helper: 'clone',
placeholder: 'addBox',
change: function() {
    $('.addBox').prev()[0].scrollIntoView();
}
于 2012-05-23T17:08:37.867 に答える
1

率直に言って、スクロールバーが不要になるようにUIを根本的に変更することをお勧めします。

スクロールバーの存在に関連するソート可能なプラグインには多くの未解決の問題があります（いくつかについては、＃3173、＃5881、＃7033、＃7065、＃7351、＃7546、＃7581、＃7784、および＃8039を参照してください）。例）。プラグインは2.0で書き換えられるように設定されているため、開発チームは現時点ではこれらを優先していません（これはかなり先のことです）。

あなたが抱えている現在の問題を解決できたとしても（私は試しました...）、より徹底的なクロスブラウザテストに入ると、あなたは多くの悲しみに陥るだろうと感じています。個人的には、スクロールバーでソート可能な要素を持つことは、使いやすさの観点からは奇妙だと感じています。

幸運を。

于 2012-05-19T02:54:21.337 に答える
1

リストを並べて配置すると、問題が解消されます。 http://jsfiddle.net/MCcuc/18/

 <table>
      <tr>
       <td><div id="Active" class="sort">
          </div>
      </td>
      <td>
          <div id="Inactive" class="sort">
            <div class="box">
               <div class="handle"></div>
               <span>Item B</span>
            </div>
         </div>
​       </td>
     </tr>
    </table>​​​​​​​​

一番下のリストが下にスクロールすると、オーバーフローは表示されませんが、一番上のリストがあるスペースに影響を与えています。下のリストは表示されません。Qアイテムをドロップしようとすると、オーバーフローのために下のリストにドロップされたままになります。

于 2012-05-23T14:57:35.573 に答える
0

これを試してください：http： //jsfiddle.net/KaBB7/

主なアイデアは、ソート可能なリストをそれ自体に接続する必要がないため、リストを個別に初期化して相互に接続するだけです。

于 2012-05-23T09:39:47.220 に答える