3

トランプの並べ替え可能なリストがあります。カードの上部だけを表示するために、各カードに負の下部マージンを付けました。これを行うと、jQueryのsortableは非常にちらつき、使いにくくなります。どうすればこのフィルカーを排除できますか？ ちらつきに加えて、ドラッグするための適切な垂直方向の配置を取得するにはどうすればよいですか？プレースホルダーをリストのそれらの側に移動するには、リストの上または下に移動する必要があるようです。

コードをhttp://jsfiddle.net/otac0n/wDTwX/に置いて、その感触をつかむことができるようにしましたが、その要点は次のとおりです。

// HTML
<div class="deck" data-bind="sortable: { data: Cards, options: { placeholder: 'card', cursorAt: { left: 5, top: 5 }, tolerance: 'pointer' } }">
    <div class="card" data-bind="text: Name, style: { background: Color }"></div>
</div>

// CSS
.deck
{
    margin: 10px;
    padding: 0 0 130px 0;
}

.card
{
    width: 100px;
    height: 150px;
    border: 1px solid black;
    border-radius: 8px;
    background: White;
    color: White;
    margin: 0 0 -130px 0;
    padding: 5px;
}

// JS
var vm = {
    Cards: ko.observableArray([
        { Name: "Red", Color: "#f00" },
        { Name: "Green", Color: "#0f0" },
        { Name: "Blue", Color: "#00f" },
    ])
};

ko.applyBindings(vm);
4

3 に答える 3

5

ちらつきのあるソータブルにも苦労しました。2 つの条件でのみちらつくことに注意してください。

  1. connectWith使用中のオプションがあります
  2. 親コンテナー (私の場合は<ul>タグ) には、高さ、または高さ<div style="clear:both">を強制するようなものがあります。

一方、接続された UL に高さがなければ、実際には何もドロップできません。しかし、UL が高くなるたびにちらつきます。だから私はたった10pxの高さを入れて、それはうまくいった. それがうまくいかない場合は、UL の親で、overflow: visible または overflow: hidden を使用してみてください。それが役に立てば幸い。

アップデート：

アイテムの行が複数ある場合は機能しません。それを行うことで修正できました：

over: function( event, ui ) { $('#my_sortable_list').css('overflow', 'visible'); }

その後

stop: function() { $('.selector_for_all_sortable_lists').css('overflow', 'hidden'); }

それは両方の接続されたリストにあります

于 2012-11-28T17:58:55.003 に答える
2

私の実際のケースでは、答えはoverflow: visible、オーバーラップ効果を得るために負のマージンではなく使用することでした。

これにより、魔法のようにすべてが機能しました！

于 2012-05-18T00:35:30.187 に答える
1

まず最初に、あなたはそこに逃げる議論をしています。

sortable: { data: Cards, 
    options: { placeholder: 'card', cursorAt: { left: 5, top: 5 }, }
    ,tolerance: 'pointer'}

許容範囲はオプション配列内にある必要があるため、選択されません:)つまり。

sortable: { 
    data: Cards, 
    options: { 
        placeholder: 'card', 
        cursorAt: { left: 5, top: 5 },
        tolerance: 'pointer'
    }
}

ちらつきについては、イベントが要素（重なり合っている）を介して泡立っているため、好きなようです。意図した場合にのみソートされるようにする方法を考えてみてください:)

編集: この問題は似ているようです:オーバーラップする jQuery ソート可能リストの処理

于 2012-05-17T23:45:33.220 に答える