0

我有一个固定布局的网页。这是我的HTML，

html

<div id="sortable" style="display: block;">   
    <fieldset style="float: left;">
         <table>
             <tbody>
                 <tr>               
                     <td><a href="#"><img src="Data/Images/2012_08_12_00_47_53_4753.jpg" style="border-color:#DDDDDD;border-width:2px;border-style:solid;width:50px;margin-left: 10px"></a></td>
                     <td><a href="#"><img src="Data/Images/2012_08_12_00_47_54_4754.png" style="border-color:White;border-width:2px;border-style:solid;width:50px;margin-left: 10px"></a></td>
                     <td><a href="#"><img src="Data/Images/2012_08_12_00_47_55_4755.jpg" style="border-color:White;border-width:2px;border-style:solid;width:50px;margin-left: 10px"></a></td>
                     <td><a href="#"><img src="Data/Images/2012_08_12_00_47_56_4756.jpg" style="border-color:White;border-width:2px;border-style:solid;width:50px;margin-left: 10px"></a></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</div>​

现在在我的页面上，我想包含 jquery 可排序选项。我试过但失败了。这是我尝试过的：

jQuery

$( "#sortable" ).sortable();​

http://jsfiddle.net/JXqst/9/

4

4 回答 4

2

这是你想要的哥们。

参考这个。

当您排序时，td您tr的 id 应为sortable

于 2012-11-20T10:37:02.663 回答
1

你必须像这样改变你的js

$( "#sortable table tr" ).sortable();​

演示

于 2012-11-20T10:31:46.580 回答
1

您也可以使用列表代替表格。然后你可以使用这个：

function setSortableDefault(list) 
{
    $(list).sortable({ opacity: 0.6, cursor: 'move', update: function() {
        var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
        $.post("sortDefault.php", order, function(theResponse){
            //$("#result").html(theResponse);
        });                                                              
    }                                 
    });
}

这个函数设置列表定义为列表排序，当你移动元素时，它变得有点透明，准备订单并做一些PHP脚本（这里是sortDefault.php）。它是用于对界面和数据库中的元素进行排序的脚本的典型示例。

于 2012-11-20T10:50:21.723 回答
1

Sortable有可以传递的 som 参数。

你可以通过定位tr元素来做到这一点

$("tr", "#sortable" ).sortable();

或者为了获得更高的性能和对td元素的限制

$("tr", "#sortable" ).sortable({
    items: "td"
});​

我已经更新了你的 jsfiddle http://jsfiddle.net/DoubleYo/JTmrT/

于 2012-11-20T10:59:55.533 回答