jQuery UI droppable - khoan dung/tham lam không hoạt động như mong đợi

Question

Khi tôi kéo kéo, phần tử chứa các vật phẩm có thể bị kích hoạt (vì nó cũng có thể phân hủy), mặc dù nó nằm phía sau các vật thể và chúng được xếp chồng lên nhau ngay trên mỗi khác. Nó hoạt động giống như có một khoảng cách giữa các vật lộn, và không có một.

Tôi đã thực hiện an example on jsFiddle và đây là the screenshot of the offending behavior.

Nếu tôi thêm padding để .parent (ví dụ padding: 0.2em 0.2em 0em 0.2em hành vi thậm chí còn tồi tệ hơn.

Answer 1

Trước hết, tôi hy vọng bạn phát hiện ra một giải pháp trong những tháng này, tôi trả lời này bởi vì tôi đang làm việc với jQueryUI trong giai đoạn này và tôi nghĩ rằng đó sẽ là một bài tập tốt để cố gắng tìm câu trả lời. Ngoài ra, tôi ghét các câu hỏi chưa được trả lời^_^

Thật không may, nó thực sự trông giống như trình duyệt phản ứng như thể giữa các yếu tố đó là .child một số không gian, đủ để kích hoạt các sự kiện *over cho .parent. Ý tưởng duy nhất tôi nghĩ ra là cố gắng phát hiện nếu, khi dropover sự kiện kích hoạt trên cấp độ gốc, vị trí chuột thực sự nằm trong phần tử con. Nếu vậy, bạn nên đặt lớp accepting_drops cho phần tử con thay vì phần tử cha.

Dưới đây là đoạn code (Tôi đã thực hiện một jsFiddle để hiển thị giải pháp của tôi trong hành động):

HTML và CSS là không thay đổi gì, vì vậy tôi sẽ không sao chép chúng một lần nữa

Javascript

$('.dragme').draggable({ 
    helper: 'clone' 
}); 

$('.parent,.child').droppable({ 
    greedy: true, 
    tolerance: 'pointer', 
}); 

$(".parent").on("dropover", function(event, ui) { 
    var first = $(".child:first"); 
    var last = $(".child:last"); 

    if((event.originalEvent.pageX > first.offset().left) && 
     (event.originalEvent.pageY > first.offset().top) && 
     (event.originalEvent.pageX <= (last.offset().left + last.width())) && 
     (event.originalEvent.pageY <= (last.offset().top + last.height()))) { 
     $(this).removeClass("accepting_drops"); 
    } 
    else { 
     $(this).addClass("accepting_drops"); 
     $(".child").removeClass("accepting_drops"); 
    } 
}).on("dropout", function() { 
    $(this).removeClass("accepting_drops"); 
}); 

$(".child").on("dropover", function() { 
    $(".parent").removeClass("accepting_drops"); 
    $(".child").removeClass("accepting_drops"); 
    $(this).addClass("accepting_drops"); 
}).on("dropout", function() { 
    $(this).removeClass("accepting_drops"); 
}); 

Tôi đã xóa dòng hoverClass: 'accepting_drops' vì chúng tôi ghi đè hành vi mặc định của thành phần có thể kéo được. Đối với div phụ huynh, nếu khi một trình kích hoạt sự kiện dropover sự kiện tôi cũng nằm trong một phần tử con, tôi xóa lớp accepting_drops khỏi nó, nếu không tôi sẽ xóa nó khỏi bất kỳ đứa trẻ nào có thể có và thêm nó vào phụ huynh thay thế. Khi một sự kiện kích hoạt sự kiện dropout trên đó, tôi xóa lớp accepting_drops.

Đối với trẻ, hành vi gần như là tiêu chuẩn, trên sự kiện dropover tôi xóa lớp học accepting_drops khỏi mọi thứ khác và thêm nó vào trẻ em, trên sự kiện dropout tôi xóa nó.

Hành vi này vẫn còn hơi mơ hồ, nhưng cách giải quyết này nên thực hiện thủ thuật.