與Y可滾動列與JQuery UI排序問題可排序連接列表示例

Question

我想要做什麼：我想創建一個拖放式排序網格。遵循與JQuery UI Sortable連接列表相同的示例。

http://jqueryui.com/sortable/#connect-lists

我的代碼示例：我的上述例子中的版本是如下面的jsfiddle，

https://jsfiddle.net/t60x6j2b/5/

JS代碼

$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable", 
     placeholder: "ui-state-highlight" 
    }).disableSelection(); 
}); 

CSS

#sortable1, #sortable2 { 
      border: 1px solid #eee; 
      width: 147px; 
      min-height: 20px; 
      margin: 0; 
      padding: 5px 0 0 0; 
      float: left; 
      margin-right: 10px; 
      height:500px; 
      overflow-y: auto; 
      overflow-x: hidden; 
     } 
     #sortable1 div, #sortable2 div { 
      margin: 0 5px 5px 5px; 
      padding: 5px; 
      font-size: 1.2em; 
      width: 120px; 
      height: 50px !important; 
     } 

HTML

<div class="title">Column 1</div> 
<div id="sortable1" class="connectedSortable"> 
    <div class="ui-state-default">Item 1</div> 
    <div class="ui-state-default">Item 2</div> 
    <div class="ui-state-default">Item 3</div> 
    <div class="ui-state-default">Item 4</div> 
    <div class="ui-state-default">Item 5</div> 
    <div class="ui-state-default">Item 6</div> 
    <div class="ui-state-default">Item 7</div> 
    <div class="ui-state-default">Item 8</div> 
    <div class="ui-state-default">Item 9</div> 
    <div class="ui-state-default">Item 10</div> 
</div> 
<div class="title">Column 2</div> 
<div id="sortable2" class="connectedSortable"> 
    <div class="ui-state-highlight">Item A</div> 
    <div class="ui-state-highlight">Item B</div> 
    <div class="ui-state-highlight">Item C</div> 
    <div class="ui-state-highlight">Item D</div> 
    <div class="ui-state-highlight">Item E</div> 
    <div class="ui-state-highlight">Item F</div> 
    <div class="ui-state-highlight">Item G</div> 
    <div class="ui-state-highlight">Item H</div> 
    <div class="ui-state-highlight">Item I</div> 
    <div class="ui-state-highlight">Item J</div> 
    <div class="ui-state-highlight">Item K</div> 
    <div class="ui-state-highlight">Item L</div> 
    <div class="ui-state-highlight">Item M</div> 
    <div class="ui-state-highlight">Item N</div> 
    <div class="ui-state-highlight">Item O</div> 
    <div class="ui-state-highlight">Item P</div> 
    <div class="ui-state-highlight">Item Q</div> 
    <div class="ui-state-highlight">Item R</div> 
    <div class="ui-state-highlight">Item S</div> 
    <div class="ui-state-highlight">Item T</div> 
    <div class="ui-state-highlight">Item U</div> 
    <div class="ui-state-highlight">Item V</div> 
    <div class="ui-state-highlight">Item W</div> 
    <div class="ui-state-highlight">Item X</div> 
    <div class="ui-state-highlight">Item Y</div> 
    <div class="ui-state-highlight">Item Z</div> 
</div> 

正如你所看到的不是很多我的代碼和jQuery UI的例子之間的差異。

我的問題：現在，我的問題是，當我拖動從第1列說，第1項和嘗試，第2欄項M和N項之間串門（這是滾輪下顯然是隱藏的），我需要的第2列滾動條被激活並開始滾動。而是它滾動列1.

任何幫助將不勝感激。

非常感謝，

KARTHIK

Answer 1

您可以定位滾動實例的scrollParent屬性，並更改它的over事件。這是jquery-ui中用來計算滾動的內容。它可能應該是默認行爲，但由於某種原因，它看起來並不像。

看到這個example：

$(function() { 
 
    $("#sortable1, #sortable2").sortable({ 
 
     connectWith: ".connectedSortable", 
 
     placeholder: "ui-state-highlight", 
 
     over: function (e, ui) { 
 
      $(ui.sender).sortable('instance').scrollParent = $(e.target) 
 
     } 
 
    }).disableSelection(); 
 
});

.title { 
 
    float:left; 
 
} 
 
#sortable1, #sortable2 { 
 
    border: 1px solid #eee; 
 
    width: 147px; 
 
    min-height: 20px; 
 
    margin: 0; 
 
    padding: 5px 0 0 0; 
 
    float: left; 
 
    margin-right: 10px; 
 
    height:500px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 
#sortable1 div, #sortable2 div { 
 
    margin: 0 5px 5px 5px; 
 
    padding: 5px; 
 
    font-size: 1.2em; 
 
    width: 120px; 
 
    height: 50px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> 
 
<div class="title">Column 1</div> 
 
<div id="sortable1" class="connectedSortable"> 
 
    <div class="ui-state-default">Item 1</div> 
 
    <div class="ui-state-default">Item 2</div> 
 
    <div class="ui-state-default">Item 3</div> 
 
    <div class="ui-state-default">Item 4</div> 
 
    <div class="ui-state-default">Item 5</div> 
 
    <div class="ui-state-default">Item 6</div> 
 
    <div class="ui-state-default">Item 7</div> 
 
    <div class="ui-state-default">Item 8</div> 
 
    <div class="ui-state-default">Item 9</div> 
 
    <div class="ui-state-default">Item 10</div> 
 
</div> 
 
<div class="title">Column 2</div> 
 
<div id="sortable2" class="connectedSortable"> 
 
    <div class="ui-state-highlight">Item A</div> 
 
    <div class="ui-state-highlight">Item B</div> 
 
    <div class="ui-state-highlight">Item C</div> 
 
    <div class="ui-state-highlight">Item D</div> 
 
    <div class="ui-state-highlight">Item E</div> 
 
    <div class="ui-state-highlight">Item F</div> 
 
    <div class="ui-state-highlight">Item G</div> 
 
    <div class="ui-state-highlight">Item H</div> 
 
    <div class="ui-state-highlight">Item I</div> 
 
    <div class="ui-state-highlight">Item J</div> 
 
    <div class="ui-state-highlight">Item K</div> 
 
    <div class="ui-state-highlight">Item L</div> 
 
    <div class="ui-state-highlight">Item M</div> 
 
    <div class="ui-state-highlight">Item N</div> 
 
    <div class="ui-state-highlight">Item O</div> 
 
    <div class="ui-state-highlight">Item P</div> 
 
    <div class="ui-state-highlight">Item Q</div> 
 
    <div class="ui-state-highlight">Item R</div> 
 
    <div class="ui-state-highlight">Item S</div> 
 
    <div class="ui-state-highlight">Item T</div> 
 
    <div class="ui-state-highlight">Item U</div> 
 
    <div class="ui-state-highlight">Item V</div> 
 
    <div class="ui-state-highlight">Item W</div> 
 
    <div class="ui-state-highlight">Item X</div> 
 
    <div class="ui-state-highlight">Item Y</div> 
 
    <div class="ui-state-highlight">Item Z</div> 
 
</div>

Answer 2

你需要一個幫手移動到另一個列表，像這樣：

https://jsfiddle.net/t60x6j2b/6/

$('.connectedSortable').sortable({ 
    connectWith: '.connectedSortable', 
    placeholder: 'ui-state-highlight', 
    helper: function (event, element) { 
     return element.clone().appendTo($('.connectedSortable').not(element.parent())); 
    } 
});