jQueryドラッグ可能な閉じ込めオーバーフロー隠し

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>