1

1つ：並べ替え可能な行を含むテーブルが必要です（jqueryui.comを参照）。通常、例ではリストアイテムが提供されますが、テーブル行を使用してこれを行うことは非常に可能です。これが私の宿題ですhttp://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/と彼のjsfiddle：http://jsfiddle.net/bgrins/tzYbU/彼は基本的に説明しますテーブルの行を並べ替え可能にすることに伴う修正。

2：ホバー時にモーダルポップアップを表示するには、これらの並べ替え可能なテーブル行が必要です。どちらか一方しか持てないようです。並べ替え可能な行は移動しますが、ポップアップが機能しません（http://jsfiddle.net/anschwem/gAmnQ/2/私の側では並べ替え/ドラッグしますが、フィドルではありません）、またはモーダルポップアップが機能して並べ替えます、しかしそれはリストアイテムです。（http://jsfiddle.net/anschwem/gAmnQ/1/）。次に、行がテーブルから追い出され、ホバーのみが機能するという奇妙な出来事があります（http://jsfiddle.net/anschwem/gAmnQ/2/）。とにかく、正しい間隔と、新しい行を動的に作成する必要があるという事実のために、行が必要です。何か案は？

並べ替え可能なテーブルのHTMLは次のとおりです。

<table class="table_177" id="sortable2" class="connectedSortable inputboxes">
<thead>
  <tr>
    <th>Vessel Name</th>
    <th>Hull/IMO No.</th>
  </tr>
</thead>  
  <tr>
    <a class="productsModal1" style="text-decoration:none">
    <td class="ui-state-highlight" style="border-right:none">SS Mary Mae</td>
    <td class="ui-state-highlight" style="border-left:none">12345</td></a>
  </tr>      
  <tr>
    <a class="productsModal1" style="text-decoration:none">
    <td class="ui-state-highlight" style="border-right:none">EMS 234</td>
    <td class="ui-state-highlight" style="border-left:none">12346</td></a>
  </tr> 
</table>

非表示のモーダルのHTMLとCSS：

<style>
div.productsModal1
{
    display:none;
    position:absolute;
    border:solid 1px black;
    padding:8px;
    background-color:white;
}
a.productsModal1:hover + div.productsModal1
{
    display:block;
/*  animation:fade-out .5s 1;
    animation-transition-property: opacity;*/
}
div.productsModal1:hover
{
    display:block;
/*  animation:fade-out .5s 1;
    animation-transition-property: opacity;*/
}
</style>
    <div class="productsModal1" style="top: 230px; left: 320px; z-index:9999" >
  <table id="menu1">
    <tr>
      <th>Vessel Name</th>
      <th>Vessel Type</th>
      <th>Hull/IMO No.</th>
    </tr>
    <tr>
      <td>SS Mary Mae</td>
      <td>Barge</td>
      <td>12345</td>
    </tr>
  </table>
  </div>
  <div class="productsModal1" style="top: 230px; left: 320px; z-index:9999" >
  <table id="menu1">
    <tr>
      <th>Vessel Name</th>
      <th>Vessel Type</th>
      <th>Hull/IMO No.</th>
    </tr>
    <tr>
      <td>EMS 234</td>
      <td>Barge</td>
      <td>67891</td>
    </tr>
  </table>
  </div>

そして私のコード：

$(window).load(function(){
// Return a helper with preserved width of cells
var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
};
    $("#sortable2 tbody").sortable({helper: fixHelperModified}).disableSelection();
});//]]>
4

1 に答える 1

2
  • まず、tdHTMLが無効であるためにラップしているアンカータグを削除します。クラスをtrに追加します。また、データインデックスを使用してデフォルトのインデックスを保存します。これは、アンカータグを移動し、それらを関連付ける方法が必要になるためです。モーダルに

trをこれに変更します

<tr class="productsModal1" data-index=0>
  <td class="ui-state-highlight" style="border-right:none">SS Mary Mae</td>
  <td class="ui-state-highlight" style="border-left:none">12345</td>
</tr>
<tr class="productsModal1" data-index=1>
  <td class="ui-state-highlight" style="border-right:none">EMS 234</td>
  <td class="ui-state-highlight" style="border-left:none">12346</td>
</tr>

  • $（window）.load関数が機能しなかった理由はわかりませんが、document.ready関数を使用すると、並べ替えが機能しないという問題が修正されました。

  • 次に、jQueryを使用して関連するdivを表示/非表示にできます

JS

$('#sortable2 tbody tr').on({
    mouseenter: function () {
      $('div.' + $(this).attr('class')) // <-- this gets the div.. though the share the same class so can probably just hardcode
            .eq($(this).data('index')) // <-- gets the correct one according to data-index
            .show();
    },
    mouseleave: function () {
      $('div.' + $(this).attr('class'))
            .eq($(this).data('index'))
            .hide();
    }
});

フィドル

もう1つは、データ属性をハードコーディングしたくない場合です。document.ready関数内にusejQueryを記述して、動的に追加することができます。

$('#sortable2 tbody tr').each(function(i,v){
     $(this).data('index',i);
});
于 2013-01-25T17:00:25.710 に答える