Bootstrap 3 - przeciągnij element poziomo pionowym paskiem przewijania, przepełnienie-y: przewiń

Question

Po tym, jak nie udało mi się z moim previous post, zastosowałem się do sugestii i użyłem przykładu deski rozdzielczej Bootstrapa jako bazy, niestety bez powodzenia.

Celem jest strona z paskiem bocznym (col-md-3), która zawiera panele ze wszystkimi nieposortowanymi studentami (każdy ma małe panele) i główny obszar (col-md-9), który zawiera różne grupy (większe panele), w których można przeciągać i upuszczać uczniów za pomocą JQeryUI Sortable. This screenshot shows the concept.

Działa to dobrze, z wyjątkiem jednego problemu: gdy pasek boczny nie ma poziomego paska przewijania (nawet po wybraniu "overflow-x: auto"), wydaje się, że jest większy, gdy próbuje przeciągnąć panel z niego . This screenshot at the moment when I am dragging the fourt panel from above shows the problem.

Oto uproszczony wersja kodu:

CSS:

<link href="/static/css/bootstrap.css" rel="stylesheet" media="screen"> 
<style type="text/css"> 
    body { 
     padding-top: 60px; 
     padding-bottom: 40px; 
    } 

    @media (min-width: 768px) { 
     .sidebar { 
     position: fixed; 
     top: 51px; 
     bottom: 0; 
     left: 0; 
     z-index: 1000; 
     padding: 20px; 
     overflow-y: auto; 
     } 
    } 
</style> 

HTML:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-md-3 sidebar"> 
      <div class="unsortedList panel panel-default"> 
       <div class="panel-heading"> 
        Not assigned 
       </div> 
       <div class="panel-body"> 
        <ul id="0" class="list-unstyled connectedLists"> 
         <li class="panel panel-primary innerpanel" id="student_1_id"> 
          <input type="hidden" name="student_1_id" value="0"> 
          <div class="panel-body"> 
           Student 1 Name 
          </div> 
         </li> 
         <li class="panel panel-primary innerpanel" id="student_2_id"> 
          <input type="hidden" name="student_2_id" value="0"> 
          <div class="panel-body"> 
           Student 2 Name 
          </div> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 

     <div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main"> 
      <div class="col-md-4 col-sm-4 col-xs-5" id="panel_1"> 
       <div class="panel panel-default outerpanel"> 
        <div class="panel-heading"> 
         Group 1 
        </div> 
        <div class="panel-body"> 
         <ul id="1" class="list-unstyled connectedLists"> 
          <li class="panel panel-primary innerpanel" id="student_3_id"> 
           <input type="hidden" name="student_3_id" value="1"> 
           <div class="panel-body"> 
            Student 3 Name 
           </div> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-5" id="panel_2"> 
       <div class="panel panel-default outerpanel"> 
        <div class="panel-heading"> 
         Group 2 
        </div> 
        <div class="panel-body"> 
         <ul id="2" class="list-unstyled connectedLists"> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

The (funkcjonowanie i uproszczony) kod JavaScript:

$(document).ready(function(){ 

    jQuery(function(event, ui) { 
     $('.connectedLists').sortable({ 
      connectWith: ".connectedLists", 
      stop: function(event, ui) {   
       item = ui.item; 
       var newList = item.closest("ul"); 
       var group = newList.attr('id'); 
       var formField = item.find("input"); 
       formField.val(group); 
      }, 
     }); 
    }); 
}; 

Czy istnieje sposób, aby zatrzymać przewijanie paska bocznego podczas przeciągania? Dzięki za przejrzenie tego bałaganu!

Answer 1

Ok, jest to trudny problem, ale jest trochę "hack", który możemy zrobić. To prosta metoda.

Podsumowując swój problem, musisz mieć w kontenerze pojemnik overflow-y:scroll, a zachować overflow-x:hidden. Jednak po przeciągnięciu element nadal rozprzestrzenia się po kontenerze, tak jakby nie działał on w postaci overflow-x. Więc oto co robimy:

1) Opisujemy właściwość overflow-y:scroll na DOM:

$(document).ready(function(){ 
    $('.sidebar').css('overflow','scroll'); 
}); 

Nie możemy umieścić to bezpośrednio na CSS, ponieważ będziemy się zmieniać tę wartość później i CSS domyślna właściwość zastępuje go.

2)

$('.panel-body').mousedown(function(){ 
    $('.sidebar').css('overflow-y',''); 
}); 

Oznacza to, kiedy wybrać Draggable elementu (gdy wskaźnik myszy znajduje się nadal w dół), będziemy ukrywać przewijania pionowego, czyli zarówno overflow nie będzie prawdą. To jest ważna część, wiemy, że usunięcie overflow-y całkowicie rozwiązuje problem, ale potrzebujemy pionowego paska przewijania. Ukrywamy go tylko wtedy, gdy wybrany jest element.

3)

$('.panel-body').mouseup(function(){ 
    $('.sidebar').css('overflow-y','scroll'); 
}); 

Po umieszczeniu elementu przeciągany w miejscu chcieliśmy go mieć, stawiamy naszą vertical-przewijania do tyłu.

To wszystko, to może nie być płynne rozwiązanie, ponieważ jest to tylko obejście tego problemu.

Można przyjrzeć się jak to działa tutaj:

DEMO (aktualizowane)