jQuery Draggable Containment Overflow Hidden

Question

Речь идет о перетаскивании более широкого элемента, чем его родительский (переполнение: скрытый). Параметры ширины и переполнения родителя фиксированы, их нельзя изменить.

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

Изменить эту демку: 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>