Question

以下网页包含两个相互连接的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>&nbsp;&nbsp;
			</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>

使用带有连接的可滚动列表的jquery-ui可排序方法，拖动项目在拖动期间放错了位置

0 个答案: