Dừng jQuery có thể kéo từ cuộn màn hình

Question

Khi sử dụng jQuery UI có thể kéo trên phần tử div, bạn có thể kéo phần tử "off" ở bên phải của trang, nhưng trang sẽ mở rộng và tự động cuộn với phần tử. Đây là vấn đề như tôi đang cố gắng để bắt đầu một sự kiện khi phần tử đạt đến phía bên phải của cửa sổ. Một điều đáng lưu ý là tôi không thể đơn giản ràng buộc div để không thể rời đi vì tôi muốn kéo để dừng khi con trỏ của bạn gặp cạnh chứ không phải div (thử kéo nó ra phía bên trái để xem ý tôi là gì, tôi chỉ đơn giản là muốn để nhân rộng ở bên phải).

Những gì tôi đã cố gắng:

body {overflow: hidden;} - tại công trình Thoạt nhìn, nhưng nếu bạn kiểm tra đóng cơ thể được thực sự di chuyển chỉ không phải với một thanh cuộn có thể nhìn thấy. Plus này là để được sử dụng trong một plugin vì vậy tôi không thể giới hạn người dùng chỉ tràn: bodys ẩn.

Tạo trình bao bọc div của kích thước cửa sổ/vị trí cố định để kích hoạt sự kiện nhưng cơ thể vẫn mở rộng ngay dưới div cố định.

Tôi chỉ cần một cách để nói nếu tôi đang kéo một phần tử, không cuộn cửa sổ lên trên.

Đây là một jsFiddle mà cho phép kéo nhưng đi ra khỏi cửa sổ: http://jsfiddle.net/9dx1cxu8/

html: 
<div class="box"></div> 

javascript (jQueryUi): 
$('.box').draggable(); 

css: 
.box{ 
    left:200px; 
    top:200px; 
    width: 150px; 
    height: 150px; 
    box-shadow: inset 0 0 20px 
} 

Answer 1

Vui lòng sử dụng mã này:

$(".box").draggable({ containment: "#containment-wrapper", scroll: false }) 

DEMO