Bootstrap 3 - kéo phần tử ngang với thanh cuộn dọc, tràn-y: cuộn

Question

Sau khi thiếu thành công với previous post, tôi đã làm theo một gợi ý và sử dụng ví dụ Bảng điều khiển Bootstrap làm cơ sở, thật không may.

Mục đích là trang có thanh bên (col-md-3) chứa các bảng với tất cả học sinh chưa được phân loại (trong các ô nhỏ) và khu vực chính (col-md-9) chứa các nhóm khác nhau bảng), trong đó các sinh viên có thể được kéo và thả với JQeryUI Sortable. This screenshot shows the concept.

Điều này làm việc tốt, ngoại trừ một vấn đề: trong khi thanh bên không có thanh cuộn ngang (ngay cả khi chọn "overflow-x: auto"), nó có vẻ trở nên lớn hơn . This screenshot at the moment when I am dragging the fourt panel from above shows the problem.

Đây là một phiên bản tinh gọn của mã:

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 (hoạt và đơn giản hóa) mã 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); 
      }, 
     }); 
    }); 
}; 

Có cách nào tôi có thể ngăn thanh bên mở rộng khi kéo? Cảm ơn vì đã xem qua đống lộn xộn này!

Answer 1

Ok, đây là một vấn đề phức tạp nhưng có một chút 'hack' mà chúng ta có thể làm. Đó là một phương pháp đơn giản.

Để tóm tắt sự cố của bạn, bạn cần overflow-y:scroll trong vùng chứa có thể kéo, trong khi bạn giữ overflow-x:hidden. Tuy nhiên, khi bạn kéo, phần tử vẫn lan truyền trên vùng chứa như thể overflow-x không có hiệu lực. Vì vậy, đây là những gì chúng tôi làm:

1) Chúng tôi mô tả các overflow-y:scroll tài sản trên DOM:

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

Chúng tôi không thể đặt này trực tiếp trên CSS bởi vì chúng ta sẽ được thay đổi giá trị này sau đó và CSS thuộc tính mặc định ghi đè nó.

2)

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

Điều này có nghĩa, khi chúng ta chọn một phần tử kéo được (trong khi chuột vẫn còn xuống), chúng tôi sẽ ẩn cuộn dọc, có nghĩa là cả hai overflow sẽ không thể đúng. Đây là phần quan trọng, chúng tôi biết rằng việc xóa overflow-y hoàn toàn giải quyết được vấn đề nhưng chúng tôi cần một thanh cuộn dọc. Vì vậy, chúng tôi chỉ ẩn nó khi một phần tử được chọn.

3)

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

Một khi chúng ta đã đặt các phần tử kéo ở nơi chúng tôi muốn nó được, chúng tôi đặt dọc cuộn của chúng tôi trở lại.

Vậy đó, đây có thể không phải là giải pháp suôn sẻ vì nó chỉ là giải pháp thay thế.

Bạn có thể có một cái nhìn như thế nào nó hoạt động ở đây:

DEMO (cập nhật)