0

我想允许用户在这样的 HTML 页面上重新排序排列的图像：http: //www.blakearchive.org/exist/blake/archive/comparison.xq?selection=compare&copies=all&bentleynum=B1©id=urizen。 f&java=bb136.B1

基本上，我想这样做，以便您可以单击并拖动一个图像到另一个图像旁边。谁能建议任何方法来做到这一点或任何已经这样做的图片库脚本？

谢谢。

更新：

我尝试使用可排序的 jquery，但我不确定如何将 jquery 放入 xquery 函数中。当我这样做时出现解析错误（请参阅 ）：

declare function blake:comparison( )
as node( )*
{
let $initial := request:request-parameter("copyid", ())
let $copyreq := request:request-parameter( "copies", ( ) )
let $bentley := request:request-parameter("bentleynum", ()),
    $bad := collection($g:collection)/bad[@id = $g:copyid],
    $workid :=$bad/substring-before(@id, '.')

let $object := collection($g:collection)/bad[@id = string($g:copyid)]//desc[objtitle/objid/objcode[@code= $bentley]],

        $objectdbi := string($object/@dbi),
    $compwith := string($object/@compwith)

return

<document>
<head><title>William Blake Archive Comparison of {g:work($workid)} </title>
</head>
<body>
<table cellpadding="25" style="width:auto;" id="comparison">
<tr>

<script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
  </script>

  <ul id="sortable">


{(: print out information from current context:)
g:comparison($g:copyid, $bentley, $objectdbi, "1")}
{
if ($copyreq = 'all')
then 
    for $copies at $pos in if($compwith != "") 
                               then (collection($g:collection)/bad[starts-with(@id, $workid)], collection($g:collection)/bad[starts-with(@id, substring-before( $compwith, "." ) )])
                               else collection($g:collection)/bad[starts-with(@id, $workid)]
    order by $copies//printdate[1]/@value, g:copydesignation(string($copies/@id))
    return
    <p>
        {if(substring-before($copies/@id, ".") = substring-before($compwith, "."))
         then g:comparison(string($copies/@id), substring-after($compwith, "."), $objectdbi, string($pos))
              else if($copies/@id != $g:copyid)
              then g:comparison(string($copies/@id), $bentley, $objectdbi, string($pos))
        else ""}
        </p>

else 
    for $copies at $pos in request:request-parameter("copies", ())
    return
        if(substring-before($copies, ".") = substring-before($compwith, "."))
        then g:comparison(string($copies), substring-after($compwith, "."), $objectdbi, string($pos))
        else g:comparison(string($copies), $bentley, $objectdbi, string($pos))
}

{
    if ($workid = "songsie")
    then 
        for $copies at $pos in collection($g:collection)/bad[starts-with(@id, "s-inn")]
        order by $copies//printdate[1]/@value, g:copydesignation(string($copies/@id))
        return
        <p>
            {if($copies/@id != $g:copyid)
            then g:comparison(string($copies/@id), $bentley, $objectdbi, string($pos)) 
            else ""}
            </p>
    else ""

}   
{
    if ($workid = "s-inn")
    then 
        for $copies at $pos in collection($g:collection)/bad[starts-with(@id, "songsie")]
        order by $copies//printdate[1]/@value, g:copydesignation(string($copies/@id))
        return
            if($copies != $g:copyid)
            then g:comparison(string($copies/@id), $bentley, $objectdbi, string($pos))
            else ""
    else ""
}

</ul>
</tr>
</table>
</body></document>
};

transform:transform( blake:comparison( ), doc("/db/blake/xsl/main.xsl"), ( ) )

g:comparison 来自另一个文件：

declare function g:comparison($copy as xs:string, $bentley as xs:string, $original as xs:string, $position as xs:string)
as element()*
{
let $object := collection($g:collection)/bad[@id = $copy]//desc[objtitle/objid/objcode[@code= $bentley]],
    $printdate := collection($g:collection)/bad[@id = $copy]//printdate[1]/text(),
    $objid := string($object/objtitle/objid),
    $objectdbi := string($object/@dbi),
    $objectid := string($object/@id),
    $crdate := collection($g:collection)/bad[@id = $copy]//userestrict/date,
    $winwidth := xs:integer($object//windowsize/@width)
    order by $printdate
return
<td valign="top" align="center" style="font-size:smaller;"> 

{if ($objid) then
<div style="min-width:350px;"><p>
{g:copytitle($copy)}<br/>
<a href="{$g:blakeroot}archive/object.xq?objectid={$objectid}&amp;java=no" target="wbamain">{$objid}</a>
</p>
<img src="/blake/images/{lower-case($objectdbi)}.100.jpg"></img>
<!--script>document.write('img 0 is ' + document.images[0].src + ' scale to 300 as ' + ( 300 / document.images[0].width ) );</script-->
<p><a href="javascript:START('{$g:blakeroot}archive/userestrict.xq?copyid={$copy}')"><span style="font-size:smaller">&#169;{$crdate}</span></a>&#160;&#160;&#160;&#160;
</p> </div>
else ()}
</td>
};
4

1 回答 1

0

您可以尝试使用的方法： http: //www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

它包含一个示例和使用的代码。

于 2013-08-24T19:41:06.943 回答