Làm cách nào để giữ các yếu tố con khỏi can thiệp vào các sự kiện kéo và thả HTML5?

Question

Tôi có mục tiêu thả <div> mà tôi đã đính kèm các sự kiện 'thả' và 'kéo' vào. <div> chứa hình ảnh bên trong thẻ neo (đơn giản: <div><a><img /></a></div>). Các phần tử con của mục tiêu dường như chặn các sự kiện 'thả' hoặc 'kéo' khỏi bị kích hoạt. Chỉ khi phần tử đã kéo vượt quá mục tiêu, nhưng KHÔNG qua các phần tử con của nó, cả hai sự kiện được kích hoạt như mong đợi.

Hành vi tôi muốn đạt được là các sự kiện 'kéo' và 'thả' được kích hoạt ở bất kỳ đâu trên mục tiêu <div>, bất kể sự tồn tại của các phần tử con.

Answer 1

Có điều gì đó khác đang diễn ra với mã của bạn. Tôi chế nhạo lên một ví dụ đơn giản ở đây:

http://jsfiddle.net/M59j6/6/

và bạn có thể thấy rằng yếu tố con không ảnh hưởng đến các sự kiện.

Answer 2

Kéo thông số kỹ thuật thả & bị lỗi nghiêm trọng và khá khó làm việc.

Bằng cách theo dõi các phần tử con, có thể đạt được hành vi mong đợi (của các phần tử con không can thiệp).

Dưới đây là một ví dụ ngắn về cách để làm điều này (với jQuery):

jQuery.fn.dndhover = function(options) { 
    return this.each(function() { 
    var self = jQuery(this); 
    var collection = jQuery(); 

    self.on('dragenter', function(event) { 
     if (collection.size() === 0) { 
     self.trigger('dndHoverStart'); 
     } 

     collection = collection.add(event.target); 
    }); 

    self.on('dragleave', function(event) { 
     collection = collection.not(event.target); 

     if (collection.size() === 0) { 
     self.trigger('dndHoverEnd'); 
     } 
    }); 
    }); 
}; 

jQuery('#my-dropzone').dndhover().on({ 
    'dndHoverStart': function(event) { 
    jQuery('#my-dropzone').addClass('dnd-hover'); 

    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
    }, 
    'dndHoverEnd': function(event) { 
    jQuery('#my-dropzone').removeClass('dnd-hover'); 

    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
    } 
}); 

Điểm Uy Tín: 'dragleave' of parent element fires when dragging over children elements

Answer 3

Hơi xiên cho câu hỏi ban đầu, nhưng tôi googled cách của tôi ở đây tự hỏi như sau :

Làm cách nào để tạo <img />, là con của vùng chứa <div draggable="true">...</div>, hoạt động đúng như một tay cầm wi thứ để di chuyển container đó?

đơn giản: <img src="jake.jpg" draggable="false" />

Answer 4

Bạn có thể tắt con trỏ-sự kiện trong CSS cho tất cả trẻ em.

.targetDiv * { 
    pointer-events: none; 
}