Geek Answers Handbook

Hidden jQuery overflow overflow

This applies to dragging a wider element than its parent (overflow: hidden). The parameters of the parent width and overflow are fixed, cannot be changed.

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

Change this demo: https://jsfiddle.net/jeafgilbert/LtkkzccL/

So that we can only drag the proposal without spaces before or after the proposal .

+6
source share
1 answer

You can check the current position of the dragged item in the drag callback, and then override the position if it is out of bounds.

In other words, if the left positioning is greater than 0 , redefine the left positioning and set it to 0 so that it never exceeds 0 . If the width of the draggable element minus the width of the parent element is less than the left position, redefine the left position to return it back to the offset width.

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>
+4
source

More articles:


All Articles