一:我需要一个带有可排序行的表(参见 jqueryui.com)。通常,这些示例会为您提供列表项,但很有可能使用表格行来执行此操作。这是我的作业http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/和他的 jsfiddle:http: //jsfiddle.net/bgrins/tzYbU/他基本上解释了与使表行可排序的修复程序。
二:我需要这些可排序的表格行在悬停时弹出模式。看来我只能有一个或另一个。可排序的行移动,但弹出窗口不起作用(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();
});//]]>