php使用curl代理實現抓取數據的方法
755
2024-01-10
前些日子不是在做使用Jquery-UI實現一次拖拽多個選中的元素操作嘛，在持續完善這個組件時遇到了一個關于拖放排序的bug。今天就著圖片和代碼重現一下，也順便告訴大家如何解決這個問題。
首先先上圖描述一下問題：
先來張正常的圖：
如上圖，整個div層被我設置了固定高度和滾動條。頁面如上所示，在可排序區域（黃色列表區域）可見情況下，從左面向右邊拖拽時，可以成功觸發排序的操作。
接著再來張bug圖
上圖為bug觸發說明圖，將滾動條拖拽到底部（保證右側可排序的黃色區域在div中不可見就行），此時是看不見黃色的排序列表的。在這個情況下，拖拽需要排序的元素，然后鼠標一直拖拽向上移動到可排序的列表區域時，會發現排序操作沒有任何作用。無法觸發排序功能。
幾經查找，終于發現了一個方法。來看一下：
猜測是，鼠標在紅色邊框區域內拖拽移動到排序位置時，沒有計算涉及到滾動條的距離等信息。看到了上面的方法說明，本人就嘗試了一下，定義了div的滾動事件機制，在滾動事件觸發時，加載refresh方法來刷新位置信息。方法定義好后，再次重復試驗上面的兩種情況，okay，都可以搞定了。
下面給出demo的代碼，大家在遇到這種情況下就可以將整個小bug滅掉了。
<!doctype html>
<html lang="en">
<head> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" />
<style>
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="http://www.gimoo.net/t/1810/js/jquery-1.11.2.js"></script>
<script src="http://www.gimoo.net/t/1810/js/jquery-ui-1.12.1.dropable/jquery-ui.js"></script>
<script>
$( function() {
$("#sortable1>li").draggable({
containment: "#cc",
cursor: "default",
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時，它的拖拽排序方法記錄位置信息時并不準確，應該說緩存的位置信息不能及時更新，一次計算錯誤后，導致后續的位置越來越偏移。如下圖：
可以看到中間部分，我拖拽了一個元素，此時我的鼠標在在中間的黃色區域，但是拖拽元素（淡藍色方框）卻距離鼠標位置很遠。這個情況的發生情況是這樣的，在左側拖拽元素后，一直在中間面板拖動，中間面板有很多個小容器，它們都可以盛放拖拽的元素。鼠標在這些容器上來回移動幾次后就會出現鼠標位置和元素位置偏移問題。
這個問題不是前面提及的在滾動條事件中加上refresh方法就可以解決了。目前這個問題看jqueryui源碼應該是臨時記錄的位置信息問題，也沒有計算滾動條距離等。想嘗試一下改動jqueryui源碼，改了半天，未見成效啊。
遺留下了這個問題。如果有知道該問題的解決方案的小伙伴， 求告知解決方案啊~~~
