1

既存の div リストをソート可能にしようとしています。並べ替え可能なウィジェットによって追加されたプレースホルダーにこだわっています。Web サイトでデモを確認すると、ドラッグしたアイテムがリスト マークアップ内で移動することがわかります。しかし、私の例では、スタイル付きのプレースホルダーしか見えませんが、要素間を移動していません。ドラッグされたアイテムは、常にリリースした開始点に戻ります。期待どおりに div で動作しませんか、それともここで何が欠けていますか?

<div class="dummy-deviceList">
  <div class="dummy-device ui-sortable" data-dummy-device-id="">
    <div class="dummy-device-main">
      <div class="dummy-icon dummy-icon-deviceStatus-ok"></div>
      <div class="dummy-device-descr">
        <div class="dummy-device-descr-main">FOO1</div>
        <div class="dummy-device-descr-more">BAR1</div>
      </div>
      <div class="dummy-link dummy-link-context dummy-icon dummy-icon-context"></div>
      <div class="dummy-link dummy-link-centerMap dummy-icon dummy-icon-centerMap"></div>
    </div>
  </div>

  <!-- More items here -->
</div>

デモ

http://jsfiddle.net/fuAL2/

4

1 に答える 1

1

フィドルのコードが元のソースなのか、jQueryUI の実行が終了した後に生成されたマークアップなのかはわかりません。ただし、機能するためにクラスを追加する必要はありません.sortable()。.sortable()ソート可能にしたい子の要素を呼び出すだけで十分です。

したがってui-sortable、コードからクラスを削除し、.sortable()呼び出されるセレクターで親コンテナーを使用する必要が$(".dummy-deviceList").sortable(); あり $(".dummy-deviceList .dummy-device").sortable();ます。ただし、float:lefton が存在する.dummy-device-descrと、プレースホルダーが正しく機能しないようにも見えます。

プレースホルダーのフロートの問題は、jQueryUI のチケット #7501 (執筆時点でオープン) のように見えますが、ソートされている要素がフロートされているため、ソート可能な要素のフロートが絶対配置されたプレースホルダーと競合しているという単純なケースであると思われます。通常の流れから外れています。

したがって、必要な変更は次のとおりです。

  1. 削除する.dummy-device-descr float:left
  2. class="dummy-device"要素から ui-sortable クラスを削除
  3. セレクターを から$(".dummy-deviceList .dummy-device")に変更$(".dummy-deviceList")

これに加えて、あなたのコードは多少のDivitisに苦しんでおり、(リンクされた記事の理由により) 少し整理することで確かに恩恵を受けることを付け加えておきます。

于 2012-11-05T15:53:10.703 に答える