可在 HTML 中排序的带有 jquery 的可排序图像答案

【问题标题】：Sortable images with jquery sortable in HTML可在 HTML 中排序的带有 jquery 的可排序图像
【发布时间】：2013-08-25 16:24:59
【问题描述】：

我正在尝试在 HTML 中使用 jquery 制作可排序的图像。这里的来源有什么问题？我已经在 functions.js 文件中定义了 jquery 可排序函数，并在此页面上用文本对其进行了测试，所以我知道它可以工作。但我无法让它与图像的 div 及其各自的标题一起使用。我是否必须以某种方式为图像 div 设置 CSS？

这里是来源。有关可排序 div，请参阅“可排序”，它围绕图像 div。

<html xmlns:exist="http://exist.sourceforge.net/NS/exist">
    <head>
        <title>William Blake Archive Comparison of The First Book of Urizen (1794): electronic edition</title>
        <script src="/blake/applets/lightbox/lb.js"></script>
        <link rel="stylesheet" type="text/css" href="/blake/style.css" />
        <link rel="stylesheet" type="text/css" href="/blake/slider.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
        <script src="/blake/jQueryRotate.2.1.js" type="text/javascript"></script>
        <script src="/blake/binaryajax.js" type="text/javascript"></script>
        <script src="/blake/imageinfo.js" type="text/javascript"></script>
        <script src="/blake/exif.js" type="text/javascript"></script>
        <script src="/blake/accessibleUISlider.jQuery.js" type="text/javascript"></script>
        <script src="/blake/functions.js"></script>
        <style type="text/css"></style>
        <meta lang="en" />
        <script type="text/javascript"></script>
        <link rel="meta" type="application/rdf xml" href="/exist/blake/archive/rdf.xq?req=&amp;mode=obj" />
    </head>
    <body onLoad="window.name=''">
        <div>
            <table cellpadding="25" style="width:auto;" id="comparison">
                <tr>
                    <div id="sortable" class="ui-state-default">
                        <td valign="top" align="center" style="font-size:smaller;">
                            <div style="min-width:350px;">
                                <p>The Book of Urizen,   copy G,  
c. 1818 (Library of Congress): electronic edition <br />
                                    <a href="/exist/blake/archive/object.xq?objectid=urizen.g.illbk.21&amp;java=no" target="wbamain">object 21 (Bentley 21, Erdman 21, Keynes 21)</a>
                                </p>
                                <img src="/blake/images/urizen.g.p21.100.jpg" />
                                <p>
                                    <a href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=urizen.g')">
                                        <span style="font-size:smaller">©<date>1998</date>
                                        </span>
                                    </a>&#160;&#160;&#160;&#160;
</p>
                            </div>
                        </td>
                        <td valign="top" align="center" style="font-size:smaller;">
                            <div style="min-width:350px;">
                                <p>The First Book of Urizen,   copy B,  
1795 (Morgan Library and Museum): electronic edition <br />
                                    <a href="/exist/blake/archive/object.xq?objectid=urizen.b.illbk.23&amp;java=no" target="wbamain">object 23 (Bentley 21, Erdman 21, Keynes 21)</a>
                                </p>
                                <img src="/blake/images/urizen.b.p23-21.100.jpg" />
                                <p>
                                    <a href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=urizen.b')">
                                        <span style="font-size:smaller">©<date>2003</date>
                                        </span>
                                    </a>&#160;&#160;&#160;&#160;
</p>
                            </div>
                        </td>
                        <td valign="top" align="center" style="font-size:smaller;">
                            <div style="min-width:350px;">
                                <p>A Large Book of Designs,  copy A,  
1796 (British Museum): electronic edition <br />
                                    <a href="/exist/blake/archive/object.xq?objectid=bb85.a.spb.02&amp;java=no" target="wbamain">object 2 (Bentley 85.2, Butlin 262.3)</a>
                                </p>
                                <img src="/blake/images/bb85.a.2.ps.100.jpg" />
                                <p>
                                    <a href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=bb85.a')">
                                        <span style="font-size:smaller">©<date>2012</date>
                                        </span>
                                    </a>&#160;&#160;&#160;&#160;
</p>
                            </div>
                        </td>
                    </div>
                </tr>
            </table>
        </div>
        <p>
            <script language="JavaScript">
                        datestamp( );   
                </script>
        </p>
    </body>
</html>

【问题讨论】：

标签： jquery html css image jquery-ui-sortable

【解决方案1】：

您需要将id 分配给tr 并将类分配给td

演示jsFiddle

$(function(){
    $('#comparison').sortable();
})

【讨论】：

太棒了！非常感谢！
不客气。如果我的回答有帮助，您能否将其标记为正确。谢谢。
现在如何让可拖动 div 的背景没有填充或灰色？我假设它来自 class=ui-state-default。