ember-drag-sort：HTMLテーブルに基づいてソート可能なリストを実装していますか？

Question

当初の質問@livfwdGitHubです。

これは：before：after擬似要素がテーブルレイアウトを分割し、テーブル内の行をドラッグするときに予期しない場所にプレースホルダを配置するようです。

既知の回避策はありますか？ :beforeと:after pseudoelements：

Answer 1

ember-drag-sortは、プレースホルダをレンダリングするために、単純なCSS技術を使用しています。

テーブルのセマンティクスが非常に制限されているため、残念ながら、これはHTMLテーブルでは機能しません。この問題を回避するには、セレクタの代わりに表のセルの上/下のパディングを使用できます。

パディングが表のセル内に表示されるため、これは最適なソリューションではありません。セルに罫線を付ける場合は、セルを内側の要素に適用する必要があります。

テーブルは現在demoの一部です。ご覧ください。ここで

は、デモで使用されるCSSの上書きです：

table { 
     width: 100%; 
    } 

    table.dragSortList.-isExpanded { 
     padding: 15px; 
     background-color: #f6f6f6; 
    } 

    table.dragSortList.-isExpanded.-isDraggingOver { 
     background-color: #eee; 
    } 

    table.dragSortList.-isExpanded.-isDraggingOver:before { 
     content: none; 
    } 

    tr.dragSortItem.-placeholderAbove:before, 
    tr.dragSortItem.-placeholderBelow:before { 
     content: none; 
    } 

    tr.dragSortItem.-placeholderAbove td { 
     padding-top: 25px; 
    } 

    tr.dragSortItem.-placeholderBelow td { 
     padding-bottom: 25px; 
    } 

    table .the-item { 
     margin: 0; 
    } 

このアプローチは、あなたに合っていない場合は、残念ながら、このアドオンは現在、他の何かを提供することはできません。 divに戻すか、別のドラッグソートアドオンを使用する必要があります。