HTML에서 정렬 가능한 jquery로 정렬 가능한 이미지

jquery로 정렬 가능한 이미지를 HTML로 만들려고합니다. 근원에있는 무엇이 여기에서인가? functions.js 파일에서 jquery sortable 함수를 정의하고이 페이지에서 텍스트로 테스트 했으므로 작동하는 것으로 알고 있습니다. 그러나 이미지의 div와 각각의 제목과 함께 작동시킬 수는 없습니다. 이미지 div의 CSS를 특정 방식으로 설정해야합니까?HTML에서 정렬 가능한 jquery로 정렬 가능한 이미지

다음은 출처입니다. 이미지 div를 둘러싼 정렬 가능한 div의 경우 "sortable"을 참조하십시오.

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

출처

2013-08-25 Anonymous

당신은 jsFiddle

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

출처

2013-08-25 16:52:37 Vector

브릴리언트 td

DEMO에 tr에 id 및 클래스를 할당해야합니다! 정말 고맙습니다! –

반갑습니다. 내 대답이 도움이된다면 올바른 것으로 표시 할 수 있습니다. 감사. – Vector

이제 드래그 가능한 div의 배경이 패딩이나 회색으로 보이지 않게하려면 어떻게해야합니까? 저는 그것이 class = ui-state-default에서 오는 것이라고 가정합니다. –

HTML에서 정렬 가능한 jquery로 정렬 가능한 이미지

답변

관련 문제