0

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>
4

1 に答える 1

0

idをにtr、クラスをに割り当てる必要があります。td

デモjsFiddle

$(function(){
    $('#comparison').sortable();
})
于 2013-08-25T16:52:37.927 に答える