0

この問題と戦った後、私は助けを求めるしかないのです！私の状況はこれです：私は絶対に配置された要素をいくつか持っています。これらの各要素には、独自の属性「top」と「left」があります。私がこれで抱えている大きな問題は、アイテムを並べ替えようとするときです。

$(".container").sortable({
    containment: ".container",
    cursor: 'move',
    items: '.element',
    helper: 'clone',
    placeholder: 'new-placeholder',
    forcePlaceholderSize: true,
    tolerance: 'pointer',
    revert: true,
    scroll: false,
    start: function(event, ui) {
        event.stopPropagation();
        $(".new-placeholder").css("left", ui.helper.position().left);
        $(".new-placeholder").css("top", ui.helper.position().top);
        $(".new-placeholder").css("height", ui.helper.height());
        $(".new-placeholder").css("width", ui.helper.width());
    },
    change: function(event, ui) {
        console.log("Placeholder index: " + ui.placeholder.index());
    }
}).disableSelection();

これは現在の動作であり、これは予想される動作です

ご覧のとおり、ドラッグされた要素がオンになると、要素の位置が変わるはずです。これを行うためのより良い方法はありますか？私は絶対的な位置を取り除くことができません、それが主な問題です。解決策はメソッドの変更、更新、停止にある必要があることは知っていますが、これを自分で理解することはできません。

これまでのところ、アイテムが別の要素の上にドラッグされているときにプレースホルダーの新しいインデックスを取得するだけでしたが、プレースホルダーの位置を変更し、それに応じて残りの要素を並べ替えるにはどうすればよいですか？

4

2 に答える 2

1

すべての要素を再現することは実用的ではありませんが、私自身の更新（それを機能させるため）の基本的な考え方は次のとおりです。

  1. コンテナと「ポートレット」からすべての絶対位置を削除します

  2. 並べ替え可能な各コンテナは左に浮いていて、比較的配置されており、下部にパッドがあります。このパディングは、空のコンテナでもターゲットにできることを意味します

  3. コンテナ内の各「ポートレット」の幅は100％に設定されており、相対的な位置と下マージン（間隔を空けるため）で左にフロートされます。

  4. 「start」パラメーターを使用して、プレースホルダーのサイズを動的に設定しました。プレースホルダーのサイズを高さ350ピクセルに制限しますが、それよりも小さいウィジェットの場合、プレースホルダーはポートレットのサイズと同じになります。

  5. 「connectWith」パラメーターを使用してコンテナーをリンクしました。

基本的なHTML：

<div class="portletContainer"> <!-- floated left, has padding -->

  <div class="portlet"> <!-- floated left, margin-bottom, 100% width -->
    <div> some stuff </div>
  </div>

  <div class="portlet"> <!-- floated left, margin-bottom, 100% width -->
    <div> some more stuff </div>
  </div>

</div>

<div class="portletContainer">
  <!-- repeat the above pattern; the two containers are then linked -->
</div>

基本的な並べ替え可能なJavaScript：

$('.portletContainer').sortable({
  connectWith: ".portletContainer",
  start: function(e, ui) {
    var elementHeight = ui.item.height();
    if(elementHeight < 350) {
      ui.placeholder.height(elementHeight);
    }
  }
});

それでもうまくいかない場合は、見落とされている可能性があります。何かが絶対位置を継承しているか、JavaScriptがそれを追加しています。

これですべてのベースがカバーされると思いますが、さらに短いバージョンは次のとおりです。マークアップとCSSがjQueryUIの並べ替え可能なデモページの「ポートレット」サンプルのマークアップとCSSに類似するまで元に戻しました。

于 2013-01-17T17:32:16.880 に答える
0

これを実現する方法は2つあります。nth-childまたはセレクターでCSSのトリックを使用してnth-type-of、要素に直接ではなく、インデックスに絶対位置を適用できます。したがって、並べ替え可能なプラグインがどのように機能するかによってアイテムがDOMツリー内で移動する場合、インデックスは同じままであるため、アイテムは正しい位置属性をキャプチャします。

もう1つの方法はsortchange、リスト内のアイテムの順序が変更されるたびに起動するプラグインのイベントを使用することです。したがって、イベント関数では、アイテムを繰り返し処理して、正しい位置を再適用する必要があります。

両方の方法の使用方法の詳細については、こちらを確認してください。

于 2014-01-10T14:30:50.733 に答える