Problemi con la colonna scrollabile con l'interfaccia utente di JQuery Esempio di elenchi di connessioni ordinabili

Question

Quello che sto cercando di fare: Sto cercando di creare una griglia di tipo Drag-Drop-Sort. Seguito dello stesso esempio degli elenchi di collegamenti ordinabili dell'interfaccia utente JQuery.

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

My Code Esempio: mia versione dell'esempio precedente è come sotto JSFiddle,

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

codice 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> 

Come si può vedere non un sacco di differenza tra il mio codice e jQuery esempio ui.

Il mio problema: Ora, i miei problemi è quando mi trascina dire Articolo 1 dalla colonna 1 e cercare di cadere in mezzo Articolo M e Voce N sulla colonna 2 (che ovviamente sono nascosto sotto lo scroller), ho bisogno del scroller colonna 2 per attivarsi e iniziare a scorrere. Ma piuttosto scorre la colonna 1.

Qualsiasi aiuto sarebbe molto apprezzato.

Molte grazie,

Karthik

Answer 1

È possibile indirizzare la proprietà scrollParent dell'istanza scorrevole e cambiarlo sull'evento over. Questo è ciò che viene usato in jquery-ui per calcolare lo scrolling. Probabilmente dovrebbe essere un comportamento predefinito, ma per qualche motivo non sembra.

Vai a questa 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

è necessario spostare un aiutante in altro elenco in questo modo:

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())); 
    } 
});