jQuery ड्रैगगेबल कंटेंटमेंट ओवरफ़्लो छिपी हुई

Question

यह अपने माता-पिता (ओवरफ़्लो: छुपा) से व्यापक तत्व खींचने के बारे में है। अभिभावक की चौड़ाई और अतिप्रवाह विकल्प निश्चित हैं, बदला नहीं जा सकता है।

एचटीएमएल

<div class="container"> 
    <p class="text">The quick brown fox jumps over the lazy dog.</p> 
</div> 

सीएसएस

.container { 
    position:relative; 
    width:300px; 
    height:50px; 
    background:#ccc; 
    overflow:hidden; // be careful, changing to overflow-x:hidden breaks the answer 
} 
.text { 
    position:absolute; 
    top:7px; 
    margin:0; 
    width:1000px; 
    font-size:30px; 
} 

jQuery

$('.text').draggable({ 
    axis: 'x', 
}) 

इस डेमो संशोधित करें: https://jsfiddle.net/jeafgilbert/LtkkzccL/

तो हम कर सकते हैं कि वाक्य से पहले या उसके बाद रिक्त स्थान के बिना वाक्य को केवल खींचें।

Answer 1

आप drag कॉलबैक में ड्रैगगेबल तत्व की वर्तमान स्थिति की जांच कर सकते हैं और फिर सीमा के बाहर होने पर स्थिति को ओवरराइड कर सकते हैं।

दूसरे शब्दों में, यदि बाएं पोजिशनिंग 0 से अधिक है, तो बाएं पोजिशनिंग को ओवरराइड करें और इसे 0 पर सेट करें ताकि यह 0 से अधिक न हो। यदि ड्रैगगेबल तत्व की चौड़ाई कम से कम मूल तत्व की चौड़ाई बाएं पोजिशनिंग से कम है, तो बाएं पोजीशनिंग को ऑफसेट चौड़ाई पर सेट करने के लिए ओवरराइड करें।

Updated Example

$('.text').draggable({ 
 
    axis: 'x', 
 
    drag: function(event, ui) { 
 
    var left = ui.position.left, 
 
     offsetWidth = ($(this).width() - $(this).parent().width()) * -1; 
 

 
    if (left > 0) { 
 
     ui.position.left = 0; 
 
    } 
 
    if (offsetWidth > left) { 
 
     ui.position.left = offsetWidth; 
 
    } 
 
    } 
 
});

.container { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 50px; 
 
    background: #ccc; 
 
    overflow: hidden; 
 
} 
 
.text { 
 
    position: absolute; 
 
    top: 7px; 
 
    margin: 0; 
 
    white-space: nowrap; 
 
    font-size: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<div class="container"> 
 
    <p class="text">The quick brown fox jumps over the lazy dog.</p> 
 
</div>