以下网页包含两个相互连接的jquery-ui可排序div。
只要两个div不可滚动,一切都很有效。但是当我用它们滚动它们时可以使用:
#divLeft,#divRight {height:500px; overflow-y:scroll; }
拖动的项目不再出现在光标下方。有时它在错误的位置可见,有时根本不可见(可能在滚动框外)。
这有什么问题吗?
提前致谢,
吉姆
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Jquery-ui Sortable Scrollable</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/redmond/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
<style>
/*
*/
#divLeft, #divRight { height:500px; overflow-y: scroll; }
.ph {height:12px }
</style>
<script>
$(function ()
{
$("#divLeft").sortable({
connectWith: ".connectedSortable",
placeholder: 'ph'
}).disableSelection();
$("#divRight").sortable({
connectWith: ".connectedSortable",
placeholder: 'ph'
}).disableSelection();
});
</script>
</head>
<body>
<table>
<tr>
<td valign=top>Left<div id="divLeft" class="connectedSortable" style="padding-top:10px">
<div>Apples</div>
<div>Oranges</div>
<div>Bananas</div>
<div>Peaches</div>
<div>Plums</div>
<div>Figs</div>
<div>Dates</div>
<div>Nectarines</div>
<div>Strawberries</div>
<div>Elderberries</div>
<div>Apricots</div>
<div>Crabapples</div>
<div>Mullberries</div>
<div>Calabashes</div>
<div>Gooseberries</div>
<div>Guavas</div>
<div>JuJubes</div>
<div>Coconuts</div>
<div>Grapes</div>
<div>Grapefruits</div>
<div>Honeydews</div>
<div>Prunes</div>
<div>Limes</div>
<div>Kumquats</div>
<div>Lemons</div>
<div>Olives</div>
<div>Papayas</div>
<div>Pineapples</div>
<div>Pomegranate</div>
<div>Pineapples</div>
<div>Pumpkins</div>
<div>Rhubarbs</div>
<div>Sloes</div>
<div></div>
</div>
</td>
<td>
</td>
<td valign=top>Right
<div id="divRight" class="connectedSortable" style="padding-top:10px">
<div>Blueberries</div>
<div>Raspberries</div>
<div>Mangos</div>
<div>Watermellons</div>
<div>Cantaloupes</div>
<div>Cherries</div>
</div>
</td>
</tr>
</table>
</body>
</html>