Có cách nào tôi có thể nhận jQuery để thực hiện một chức năng khi bạn kéo một mục bên ngoài DIV có thể phân tách không?jQuery Droppable: thả bên ngoài div?
Giả sử chúng tôi có các mục có thể kéo hoặc sắp xếp trong div và bạn muốn xóa chúng nếu chúng bị bỏ ngoài div cha của chúng.
Tôi biết có sự kiện "hết" nhưng hoạt động ngay khi bạn kéo mục bên ngoài div, chứ không phải khi bạn thả mục đó (thả nút chuột).
Cuối cùng có giải pháp phù hợp cho điều này, mặc dù nó hơi "hacky" một chút. Những gì tôi làm là tôi đặt div foreground với draggables là droppable, nhưng sử dụng các tính năng dropover và dropout để xác định xem item có nằm ngoài div foreground hay không. Khi nó nằm ngoài div, tôi ràng buộc sự kiện mouseup để thực hiện chức năng thả. Khi nó trở lại trong tôi unbind sự kiện mouseup để nó không cháy.
Bởi vì khi kéo tôi đã giữ nút chuột xuống, phát hành nó cũng giống như thả những gì tôi có trong "bàn tay" của tôi.
$("#foregroundDiv").droppable({
accept: ".draggableThingy",
tolerance: "pointer",
out: function(event, ui) {
$(ui.helper).mouseup(function() {
doSomethingTo(ui.draggable);
});
},
over: function(event, ui) {
$(ui.helper).unbind("mouseup");
}
});
Tại sao không bọc tất cả các phần tử với một div có thể tháo rời khác, sau đó thực hiện kiểm tra ở đó?
Điều gì sẽ xảy ra nếu người dùng bỏ nó bên ngoài cửa sổ trình duyệt? Bạn sẽ xem xét điều này cũng?
Tôi đã thử gói nó trong một vật thể khác, nhưng điều này dường như không hoạt động bình thường cho dù là gì đi chăng nữa. Sự kiện "nền" có thể phân hủy sẽ kích hoạt ngay cả khi tôi thả bên trong div "tiền cảnh" nơi mục có thể kéo được. Xem http://stackoverflow.com/questions/1491742/jquery-ui-droppable-background Về cơ bản, tôi vẫn chiến đấu với cùng một vấn đề, chỉ cần quay trở lại để cố gắng sửa chữa nó. – kasakka
nếu gói sẽ không hoạt động cho bạn thử xếp chồng, nhưng bạn phải đặt tiền cảnh là anh chị em làm nền, sau đó chỉ cần đặt chỉ mục z thích hợp, hoặc nếu không, KIỂM TRA event.target trên thả xuống gọi lại .. drop: function (e) {if (e.targe.id == bg_id) {...} else {...}} – jerjer
Đã thử rằng, không có may mắn. Dường như chức năng thả không nhận ra bất kỳ id mục tiêu sự kiện nào khác ngoài chính id có thể phân tách. Ít nhất là khi tôi cố gắng đăng nhập vào giao diện điều khiển id, chỉ có các bản ghi div có thể phân hủy, mọi thứ khác sẽ không có kết quả gì. Tương tự như vậy bằng cách sử dụng khác để đi xung quanh điều này không làm việc - nó hoặc là làm một cái gì đó khi rơi vào div droppable hoặc không làm gì cả. Thật không may mà không hoạt động nếu div nền lấp đầy toàn bộ cửa sổ, nó bỏ qua những gì trên đầu trang của div – kasakka
Giải quyết vấn đề này theo cách khá "hacky": tạo một bảng có div nội dung ở giữa và làm cho tất cả các ô khác của bảng có thể bị phân tách. Về cơ bản, điều này có nghĩa là bạn có thể thả bên ngoài div trung tâm mà không có vấn đề gì, nhưng nó vẫn còn xa cách tốt để làm điều đó.
Nếu ai đó có cách nào tốt hơn, vui lòng cho tôi biết.
Tôi đã có chính xác vấn đề này, và đây là giải pháp tốt nhất tôi tìm thấy. Cảm ơn bạn! – froadie