前些日子不是在做使用Jquery-UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作嘛，在持續(xù)完善這個(gè)組件時(shí)遇到了一個(gè)關(guān)于拖放排序的bug。今天就著圖片和代碼重現(xiàn)一下，也順便告訴大家如何解決這個(gè)問(wèn)題。
首先先上圖描述一下問(wèn)題：
先來(lái)張正常的圖：
如上圖，整個(gè)div層被我設(shè)置了固定高度和滾動(dòng)條。頁(yè)面如上所示，在可排序區(qū)域（黃色列表區(qū)域）可見(jiàn)情況下，從左面向右邊拖拽時(shí)，可以成功觸發(fā)排序的操作。
接著再來(lái)張bug圖
上圖為bug觸發(fā)說(shuō)明圖，將滾動(dòng)條拖拽到底部（保證右側(cè)可排序的黃色區(qū)域在div中不可見(jiàn)就行），此時(shí)是看不見(jiàn)黃色的排序列表的。在這個(gè)情況下，拖拽需要排序的元素，然后鼠標(biāo)一直拖拽向上移動(dòng)到可排序的列表區(qū)域時(shí)，會(huì)發(fā)現(xiàn)排序操作沒(méi)有任何作用。無(wú)法觸發(fā)排序功能。
幾經(jīng)查找，終于發(fā)現(xiàn)了一個(gè)方法。來(lái)看一下：
猜測(cè)是，鼠標(biāo)在紅色邊框區(qū)域內(nèi)拖拽移動(dòng)到排序位置時(shí)，沒(méi)有計(jì)算涉及到滾動(dòng)條的距離等信息。看到了上面的方法說(shuō)明，本人就嘗試了一下，定義了div的滾動(dòng)事件機(jī)制，在滾動(dòng)事件觸發(fā)時(shí)，加載refresh方法來(lái)刷新位置信息。方法定義好后，再次重復(fù)試驗(yàn)上面的兩種情況，okay，都可以搞定了。
下面給出demo的代碼，大家在遇到這種情況下就可以將整個(gè)小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" href="js/jquery-ui-1.12.1.dropable/jquery-ui.css" /> <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="js/jquery-1.11.2.js"></script> <script src="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" ); //觸發(fā)滾動(dòng)時(shí)刷新位置信息 //$( "#sortable2").sortable( "refreshPositions" ); //同上，使用其中一個(gè)即可 }); $( "#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使用過(guò)程中遇到的一個(gè)問(wèn)題。遇到同樣問(wèn)題的小伙伴可以試一試~~
結(jié)尾還遺留了一個(gè)類似問(wèn)題，但不能使用上面的方式解決，如果有遇到下面這種情況的小伙伴，求告知。再此也描述一下問(wèn)題：
其實(shí)，在實(shí)際的使用過(guò)程中，關(guān)于在有滾動(dòng)條時(shí)使用jqueryui的交互事件，依然會(huì)有一些問(wèn)題。也嘗試看一下jqueryui的源碼，對(duì)比一下，發(fā)現(xiàn)確實(shí)在draggable中設(shè)置connectToSortable時(shí)，它的拖拽排序方法記錄位置信息時(shí)并不準(zhǔn)確，應(yīng)該說(shuō)緩存的位置信息不能及時(shí)更新，一次計(jì)算錯(cuò)誤后，導(dǎo)致后續(xù)的位置越來(lái)越偏移。如下圖：
可以看到中間部分，我拖拽了一個(gè)元素，此時(shí)我的鼠標(biāo)在在中間的黃色區(qū)域，但是拖拽元素（淡藍(lán)色方框）卻距離鼠標(biāo)位置很遠(yuǎn)。這個(gè)情況的發(fā)生情況是這樣的，在左側(cè)拖拽元素后，一直在中間面板拖動(dòng)，中間面板有很多個(gè)小容器，它們都可以盛放拖拽的元素。鼠標(biāo)在這些容器上來(lái)回移動(dòng)幾次后就會(huì)出現(xiàn)鼠標(biāo)位置和元素位置偏移問(wèn)題。
這個(gè)問(wèn)題不是前面提及的在滾動(dòng)條事件中加上refresh方法就可以解決了。目前這個(gè)問(wèn)題看jqueryui源碼應(yīng)該是臨時(shí)記錄的位置信息問(wèn)題，也沒(méi)有計(jì)算滾動(dòng)條距離等。想嘗試一下改動(dòng)jqueryui源碼，改了半天，未見(jiàn)成效啊。
遺留下了這個(gè)問(wèn)題。如果有知道該問(wèn)題的解決方案的小伙伴， 求告知解決方案啊~~~
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
