快捷導(dǎo)航

jQueryUI 拖放排序遇到滾動(dòng)條時(shí)有可能無法執(zhí)行排序的小bug及解決方案

更新時(shí)間：2016年12月19日 16:09:43 作者：Jeremy陽仔

前些日子不是在做使用Jquery-UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作嘛，在持續(xù)完善這個(gè)組件時(shí)遇到了一個(gè)關(guān)于拖放排序的bug。今天就著圖片和代碼重現(xiàn)一下，也順便告訴大家如何解決這個(gè)問題

前些日子不是在做使用Jquery-UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作嘛，在持續(xù)完善這個(gè)組件時(shí)遇到了一個(gè)關(guān)于拖放排序的bug。今天就著圖片和代碼重現(xiàn)一下，也順便告訴大家如何解決這個(gè)問題。

首先先上圖描述一下問題：

先來張正常的圖：

如上圖，整個(gè)div層被我設(shè)置了固定高度和滾動(dòng)條。頁面如上所示，在可排序區(qū)域（黃色列表區(qū)域）可見情況下，從左面向右邊拖拽時(shí)，可以成功觸發(fā)排序的操作。

接著再來張bug圖

上圖為bug觸發(fā)說明圖，將滾動(dòng)條拖拽到底部（保證右側(cè)可排序的黃色區(qū)域在div中不可見就行），此時(shí)是看不見黃色的排序列表的。在這個(gè)情況下，拖拽需要排序的元素，然后鼠標(biāo)一直拖拽向上移動(dòng)到可排序的列表區(qū)域時(shí)，會(huì)發(fā)現(xiàn)排序操作沒有任何作用。無法觸發(fā)排序功能。

幾經(jīng)查找，終于發(fā)現(xiàn)了一個(gè)方法。來看一下：

猜測是，鼠標(biāo)在紅色邊框區(qū)域內(nèi)拖拽移動(dòng)到排序位置時(shí)，沒有計(jì)算涉及到滾動(dòng)條的距離等信息?？吹搅松厦娴姆椒ㄕf明，本人就嘗試了一下，定義了div的滾動(dòng)事件機(jī)制，在滾動(dòng)事件觸發(fā)時(shí)，加載refresh方法來刷新位置信息。方法定義好后，再次重復(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使用過程中遇到的一個(gè)問題。遇到同樣問題的小伙伴可以試一試~~

結(jié)尾還遺留了一個(gè)類似問題，但不能使用上面的方式解決，如果有遇到下面這種情況的小伙伴，求告知。再此也描述一下問題：

其實(shí)，在實(shí)際的使用過程中，關(guān)于在有滾動(dòng)條時(shí)使用jqueryui的交互事件，依然會(huì)有一些問題。也嘗試看一下jqueryui的源碼，對比一下，發(fā)現(xiàn)確實(shí)在draggable中設(shè)置connectToSortable時(shí)，它的拖拽排序方法記錄位置信息時(shí)并不準(zhǔn)確，應(yīng)該說緩存的位置信息不能及時(shí)更新，一次計(jì)算錯(cuò)誤后，導(dǎo)致后續(xù)的位置越來越偏移。如下圖：

可以看到中間部分，我拖拽了一個(gè)元素，此時(shí)我的鼠標(biāo)在在中間的黃色區(qū)域，但是拖拽元素（淡藍(lán)色方框）卻距離鼠標(biāo)位置很遠(yuǎn)。這個(gè)情況的發(fā)生情況是這樣的，在左側(cè)拖拽元素后，一直在中間面板拖動(dòng)，中間面板有很多個(gè)小容器，它們都可以盛放拖拽的元素。鼠標(biāo)在這些容器上來回移動(dòng)幾次后就會(huì)出現(xiàn)鼠標(biāo)位置和元素位置偏移問題。

這個(gè)問題不是前面提及的在滾動(dòng)條事件中加上refresh方法就可以解決了。目前這個(gè)問題看jqueryui源碼應(yīng)該是臨時(shí)記錄的位置信息問題，也沒有計(jì)算滾動(dòng)條距離等。想嘗試一下改動(dòng)jqueryui源碼，改了半天，未見成效啊。

遺留下了這個(gè)問題。如果有知道該問題的解決方案的小伙伴，求告知解決方案啊~~~

您可能感興趣的文章: