html5: có cách nào để ngăn trẻ can thiệp vào sự kiện kéo

Question

Tôi đang gặp sự cố với thao tác kéo và thả html5. Tôi không thấy một cách dễ dàng nào. Về cơ bản tôi có một số "hộp" với một số yếu tố html khác bên trong. Các hộp cha có thể kéo được và chúng có thể bị rơi vào nhau.

Tôi ràng buộc dragover sự kiện trên cơ thể để xử lý thao tác kéo thả trên toàn bộ trang. Vấn đề là, khi bạn kéo qua các hộp - sự kiện đôi khi được kích hoạt trên các phần tử con và phụ huynh không nhận được sự kiện này chút nào.

Có cách nào dễ dàng để ngăn điều này xảy ra không?

Về cơ bản tôi muốn sự kiện kéo để kích hoạt ngay khi chuột ở trong vùng của hộp mục tiêu. Tôi biết một vài cách để giải quyết điều này, nhưng chúng thực sự xấu xí và tôi đã tự hỏi nếu có thể có một cái gì đó đơn giản.

Cám ơn suy nghĩ của bạn

phiên bản ngắn về những gì tôi đang làm trong mã:

document.addEventListener('dragenter', function(e) { 

    if (e.target.className == 'candrophere') 
     // cancel out "e" to allow drop 


}, false); 

Nhưng trong trường hợp của tôi phần tử con đang chiếm gần như toàn bộ hộp '.candrophere' nên sự kiện này được gần như không bao giờ bắn vào các mục tiêu chính xác (đặc biệt là khi tôi di chuyển chuột nhanh hơn)

Answer 1

về cơ bản giải pháp của tôi là như sau:

Kể từ e .target và e.currentTarget không thể được kết hợp với hộp cha mẹ phần lớn thời gian - tất cả những gì còn lại để làm là kiểm tra thủ công nếu e.target là con của hộp cha. Có rất nhiều cách để làm điều đó, nhưng tôi đang sử dụng một chức năng tùy chỉnh. Không thể đăng nó ở đây, vì nó được dựa trên khuôn khổ của riêng tôi và sẽ không làm việc mà không có nó dù sao, nhưng pseudo-code như sau:

// target is a framework object (much like jquery) 
closestDroppableParent = function(target) 
{ 
    // i know that all children in those boxes will not be any deeper than this 
    var max_levels = 5; 

    while (target && max_levels > 0) 
    { 
     max_levels--; 

     // droppable boxes have data-droptype attribute set so only other boxes with the same attribute 
     // can be dropped on them. This check can be done any way you like. You can have a custom class 
     // for droppable objects, check for draggable attribute etc... 
     // .data() is a framework function that returns the value of the data-* attributes 
     if (target.data('droptype')) 
      return target; 

     // .parent() is a framework function to get parent node 
     target = target.parent(); 
    } 

    return null; 
} 


// drag over event 
dragOverEventHandler = function(e) 
{ 
    // convert the element to its closest droppable parent 
      // $() is much like jquery 
    var closest = closestDroppableParent($(e.target)); 

    if (closest) 
     closest.addClass('draggedOver'); 
} 

Answer 2

Các css pointer-events quy tắc ngăn ngừa các sự kiện tương tác chuột từ bắn trên các yếu tố được áp dụng cho, nhưng hiện không được hỗ trợ bởi IE (http://caniuse.com/pointer-events).

Một workaround Tôi đã sử dụng cho vấn đề này là thêm một cái gì đó giống như

.is-drag-in-progress .child-elements 
{ 
    pointer-events:none; 
} 

đến CSS của bạn, và thêm các lớp is-drag-in-progress tới phần tử body trong handler onDragStart của bạn (và loại bỏ nó khi kéo đầu). Điều này sẽ ngăn chặn các phần tử con can thiệp vào các sự kiện kéo trên phần tử cha.