Ngăn chặn ngăn kéo jQuery có thể kéo ẩn Ẩn

Question

Đây là cách kéo phần tử rộng hơn so với phần tử cha (tràn: ẩn). Tùy chọn chiều rộng và tràn phụ huynh được cố định, không thể thay đổi.

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

Sửa demo này: https://jsfiddle.net/jeafgilbert/LtkkzccL/

Vì vậy mà chúng ta có thể chỉ kéo câu mà không tạo khoảng trống trước hoặc sau câu.

Answer 1

Bạn có thể kiểm tra vị trí hiện tại của phần tử có thể kéo trong cuộc gọi lại drag và sau đó ghi đè vị trí nếu nó nằm ngoài giới hạn.

Nói cách khác, nếu vị trí bên trái lớn hơn 0, ghi đè vị trí bên trái và đặt lại thành 0 sao cho nó không bao giờ có thể vượt quá 0. Nếu chiều rộng của phần tử có thể kéo trừ đi độ rộng của phần tử gốc nhỏ hơn vị trí bên trái, hãy ghi đè lên vị trí bên trái để đặt nó trở lại chiều rộng bù.

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>