cancel: "span,input",
distance: 10,
zIndex: 9,
opacity: 0.5,
cursorAt: {
right: 20,
top: 20
},
connectToSortable: "#sortable2"
});
$("#cc>div").scroll(function(e) {
$( "#sortable2").sortable( "refresh" ); //触发滚动时刷新位置信息
//$( "#sortable2").sortable( "refreshPositions" ); //同上，使用其中一个即可
});
$( "#sortable2" ).sortable({
containment:"#cc",
connectWith:"#sortable1",
zIndex:9
});
} );
</script>
</head>
<body>
<div id="cc" style="width:500px;height:200px;border:1px solid red;margin-left:50px;margin-top:80px">
<div style="width:100%;height:100%;overflow-y:auto;position:relative">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
<li class="ui-state-default">Item 8</li>
<li class="ui-state-default">Item 9</li>
<li class="ui-state-default">Item 0</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
</ul>
</div>
</div>
</body>
</html>
以上，就是记录jqueryui使用过程中遇到的一个问题。遇到同样问题的小伙伴可以试一试~~
结尾还遗留了一个类似问题，但不能使用上面的方式解决，如果有遇到下面这种情况的小伙伴，求告知。再此也描述一下问题：
其实，在实际的使用过程中，关于在有滚动条时使用jqueryui的交互事件，依然会有一些问题。也尝试看一下jqueryui的源码，对比一下，发现确实在draggable中设置connectToSortable时，它的拖拽排序方法记录位置信息时并不准确，应该说缓存的位置信息不能及时更新，一次计算错误后，导致后续的位置越来越偏移。如下图：
可以看到中间部分，我拖拽了一个元素，此时我的鼠标在在中间的黄色区域，但是拖拽元素（淡蓝色方框）却距离鼠标位置很远。这个情况的发生情况是这样的，在左侧拖拽元素后，一直在中间面板拖动，中间面板有很多个小容器，它们都可以盛放拖拽的元素。鼠标在这些容器上来回移动几次后就会出现鼠标位置和元素位置偏移问题。
