Kéo Jquery có thể kéo ra khỏi hộp thoại jquery cha mẹ của nó

Question

Tôi có một hộp thoại jquery được lấp đầy với các đối tượng có thể kéo. Mục tiêu có thể phân tách nằm ngoài hộp thoại.

Khi tôi bắt đầu kéo, phân đoạn có thể phản hồi chính xác (chỉ báo trực quan rằng đó là mục tiêu có thể phân tách) và sau khi thả các sự kiện chính xác kích hoạt để tôi có thể xử lý đúng cách thả.

Vấn đề là đối tượng được kéo chỉ hiển thị trong hộp thoại và không "nhảy ra".

Tôi đã có các hình kéo có thể kéo từ một div có thể cuộn sang một div khác mà không gặp vấn đề gì, nhưng từ hộp thoại đến trang chứa hộp thoại nó không hoạt động. Nội dung hộp thoại cuộn theo hướng bất kỳ mà thao tác kéo sẽ thực hiện.

tranh cãi kéo của tôi là như sau:

var draggableArguments={ 
    revert: 'invalid', 
    helper:'clone', 
    containment: 'DOM', 
    zIndex: 999, 
    addClasses: false 
    } 

    theObject.draggable(draggableArguments); 

Bất kỳ gợi ý để các đối tượng có khả năng kéo của tôi có thể vượt qua ranh giới thoại?

Cảm ơn.

Answer 1

Đã sửa lỗi, thực tế khá đơn giản.

Tôi chỉ cần sử dụng tùy chọn phụ thêm trên phần kéo để người trợ giúp được thêm vào phần tử mà tôi muốn kéo xung quanh (ví dụ: #page, div bao gồm trang của tôi). Điều này loại bỏ nó khỏi hộp thoại (trong đó có một thuộc tính "overflow: auto", thêm thanh cuộn để mở rộng khung hình sao cho phần tử kéo luôn ở trong) và gắn nó vào phần tử #page.

Vấn đề duy nhất là hộp thoại của tôi có zIndex khá cao, vì vậy tôi chỉ tăng thêm tùy chọn zIndex để cao hơn.

var draggableArguments={ 
    revert: 'invalid', 
    helper:'clone', 
    appendTo: '#page', 
    containment: 'DOM', 
    zIndex: 1500, 
    addClasses: false 
} 

theObject.draggable(draggableArguments); 

Answer 2

Bạn phải làm điều này:

 
$('.my_draggable').draggable({ 
    helper:'clone', 
    appendTo: 'body', 
    scroll: false 
});