jQuery Overflow di contenimento trascinabile Nascosto

Question

Riguarda il trascinamento di un elemento più largo del suo genitore (overflow: nascosto). Le opzioni di larghezza e overflow del genitore sono fisse, non possono essere modificate.

HTML

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

CSS

.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', 
}) 

Modificare questa demo: https://jsfiddle.net/jeafgilbert/LtkkzccL/

Così che possiamo trascinare solo la frase senza fare spazi prima o dopo la frase.

Answer 1

È possibile controllare la posizione corrente dell'elemento trascinabile nel callback drag e quindi eseguire l'override della posizione se è fuori dai limiti.

In altre parole, se il posizionamento a sinistra è maggiore di 0, ignorare il posizionamento a sinistra e reimpostarlo su 0 in modo che non possa mai superare 0. Se la larghezza dell'elemento trascinabile meno la larghezza dell'elemento genitore è inferiore al posizionamento sinistro, ignorare il posizionamento sinistro per riportarlo alla larghezza dell'offset.

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>