बूटस्ट्रैप 3 - वर्टिकल स्क्रॉलबार, ओवरफ्लो-वाई के साथ क्षैतिज खींचें: स्क्रॉल

Question

मेरे previous post के साथ सफलता की कमी के बाद, मैंने एक सुझाव का पालन किया और आधार के रूप में बूटस्ट्रैप के डैशबोर्ड उदाहरण का उपयोग किया, दुर्भाग्य से कोई सफलता नहीं।

उद्देश्य एक साइडबार (col-md-3) वाला एक पृष्ठ है जिसमें सभी अपरिवर्तित छात्रों (प्रत्येक छोटे पैनलों में) के साथ पैनल होते हैं, और एक मुख्य क्षेत्र (col-md-9) जिसमें विभिन्न समूह होते हैं (बड़ा पैनल), जिसमें छात्रों को जेक्यूरीयूआई सॉर्टेबल के साथ खींचा जा सकता है और गिराया जा सकता है। This screenshot shows the concept.

यह एक समस्या को छोड़कर ठीक काम करता है: जबकि साइडबार में क्षैतिज स्क्रॉलबार नहीं है (यहां तक ​​कि "ओवरफ्लो-एक्स: ऑटो" का चयन करते समय भी, यह एक पैनल को खींचने की कोशिश करते समय बड़ा हो जाता है ।

सीएसएस:

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

(कार्य कर और सरलीकृत) 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); 
      }, 
     }); 
    }); 
}; 

This screenshot at the moment when I am dragging the fourt panel from above shows the problem.

यहाँ कोड का एक सुव्यवस्थित संस्करण है

क्या कोई तरीका है जिससे मैं साइडबार को खींचते समय विस्तार से रोक सकता हूं? इस गड़बड़ को देखने के लिए धन्यवाद!

Answer 1

ठीक है, यह एक मुश्किल समस्या है लेकिन कुछ 'हैक' है जो हम कर सकते हैं। यह एक आसान तरीका है।

अपनी समस्या को सारांशित करने के लिए, आपको overflow-x:hidden रखने पर आपके कंटेनर में overflow-y:scroll की आवश्यकता है। लेकिन, जब आप खींचते हैं, तब भी तत्व कंटेनर में फैलता है जैसे कि overflow-x का कोई प्रभाव नहीं पड़ा। तो यहाँ हम क्या करना है:

1) हम डोम पर overflow-y:scroll संपत्ति का वर्णन:

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

हम इस सीधे सीएसएस पर नहीं डाल सकते, क्योंकि हम बाद में और सीएसएस इस मान को परिवर्तित करने जा रहे हैं डिफ़ॉल्ट संपत्ति इसे ओवरराइड करता है।

2)

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

इसका मतलब यह है, जब हम खींचे जाने योग्य तत्व() का चयन करते समय माउस अभी भी नीचे है, तो हम लंबवत स्क्रॉल, इसका मतलब है कि दोनों overflow सच नहीं होगा छुपा देगा। यह महत्वपूर्ण हिस्सा है, हम जानते हैं कि overflow-y को हटाने से पूरी तरह से समस्या हल हो जाती है लेकिन हमें लंबवत स्क्रॉलबार की आवश्यकता होती है। तो हम इसे केवल तब छुपाते हैं जब कोई तत्व चुना जाता है।

3)

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

एक बार जब हम जगह हम इसे बनना चाहता था में खींचे जाने योग्य तत्व रखा है, हम अपने ऊर्ध्वाधर-स्क्रॉलबार वापस डाल दिया।

यही है, यह एक आसान समाधान नहीं हो सकता है क्योंकि यह केवल एक कामकाज है।

आप यह कैसे काम करता है यहाँ पर एक नजर है कर सकते हैं:

DEMO (अद्यतन)