Giao diện người dùng jQuery cách đặt tùy chọn ngăn kéo có thể kéo trên phụ huynh của bố mẹ

Question

Tương tác jQuery Giao diện người dùng có thể kéo được có thuộc tính tốt cho setting the containment làm cha mẹ.

$(".selector").draggable({ containment: 'parent' }); 

Tôi muốn đặt ngăn chặn làm cha mẹ. Không có giá trị chuỗi để thực hiện điều này, như chuỗi các tùy chọn là

'mẹ', 'tài liệu', 'cửa sổ', [x1, y1, x2, y2]

tôi có thể tính toán x1, y1, x2, y2 của cha mẹ của cha mẹ khi tải trang và sử dụng các giá trị đó để đặt ranh giới cho vùng chứa có liên quan đến tài liệu. Nhưng vị trí vùng chứa có thể thay đổi tương đối so với vị trí gốc của cha mẹ nếu cửa sổ được thay đổi kích thước sau khi tải trang. Tùy chọn 'mẹ' gốc giữ phần tử có thể kéo trong phần tử cha bất kể việc thay đổi kích thước cửa sổ.

Có cách nào để thực hiện ngăn chặn có thể kéo này bằng cách sử dụng cha mẹ của cha mẹ không? .

Answer 1

Theo documentation, tùy chọn containment cũng có thể là bộ chọn lọc hoặc phần tử thực. Vì vậy, bạn có thể làm điều này:

$('.selector').draggable({ 
    containment: $('.selector').parent().parent() 
}); 

Hoặc thậm chí tốt hơn nào:

$('.selector').each(function(){ 
    $(this).draggable({ 
     containment: $(this).parent().parent() 
    }); 
}); 

Answer 2

Theo các tài liệu, bạn không phải vượt qua trong một chuỗi cho containment tài sản. Bạn có thể vượt qua trong bất kỳ:

Selector, Element, String, Array 

Vì vậy, chỉ cần chọn cha mẹ của cha mẹ với jQuery (ví dụ: $(".selector").parent().parent()), và vượt qua trong thay vì 'parent'.

Answer 3

này hoạt động tốt cũng như:

$('.selector').draggable({ 
    containment: "#parent", 
    scroll: false 
});