Hiển thị lớp phủ trên 'dragenter' khi kéo tệp từ máy tính để bàn đến trình duyệt

Question

Tôi đang cố gắng đạt được hiệu ứng tương tự như trên imgur.com (kéo tệp từ máy tính để bàn tới imgur.com và bạn sẽ thấy một lớp phủ). đã có giải pháp làm việc nhờ bài đăng này: Event propagation, overlay and drag-and-drop events

NHƯNG: tôi tìm giải pháp thay vì không hài lòng. vấn đề là $ (tài liệu) .on ('dragenter') được kích hoạt nhiều lần khi di chuột qua các phần tử con. tôi đã tìm kiếm một sự kiện được kích hoạt ONCE khi tôi vào khung nhìn và ONCE khi tôi rời khỏi khung nhìn để tôi có thể có một lớp phủ $ clean.fadeIn() và .fadeOut() trên dragenter và dragleave.

tôi đã giải quyết nó bằng phần tử trong suốt lấp đầy toàn bộ chế độ xem. sau đó tôi gọi trình kéo trên phần tử trong suốt thay vì trên $ (tài liệu). với $ ('*: visible'). live ('dragenter') i sau đó hiển thị lớp phủ ẩn và thực. $ ('# transparentOverlay'). on ('dragleave') ẩn các lớp phủ. khá hacky nhưng nó hoạt động (ít nhất là trong safari/chrome/firefox)

nhưng chỉ chọn $ ('*: có thể nhìn thấy'). sống() mang lại cho tôi đau đầu ...

ai có một tốt hơn gợi ý?

Answer 1

Có thể cần phải xem thêm mã/lỗi bạn đang gặp phải. Bạn đã thử một boolean đơn giản để kiểm tra khi nào sự kiện của bạn đã kích hoạt và giới hạn các sự kiện tiếp theo?

var dragging = false; 

$(document).on('dragenter', function(){ 
    if(!dragging){ 
     //DO SOMETHING 
     dragging = true; 
    } 
}); 

$(document).on('dragleave', function(){ 
    if(dragging){ 
     //DO SOMETHING 
     dragging = false; 
    } 
}); 

Answer 2

Hãy thử nó như thế này, hoạt động tốt cho tôi. Về cơ bản, nó bắt chước dragenter và dragleave sự kiện, nhưng chỉ sử dụng dragover:

;(function() { 
    var isOver = false, interval; 

    $(document).on('dragover', function(e) { 
     e.preventDefault(); 

     clearInterval(interval); 

     interval = setInterval(function() { 
      isOver = false; 
      clearInterval(interval); 

      /*** callback for onDragLeave ***/ 
     }, 100); 

     if (!isOver) { 
      isOver = true; 

      /*** callback for onDragEnter ***/ 
     } 
    }); 
})(); 

Answer 3

Một phiên bản nhẹ hơn của câu trả lời ở trên:

;(function() { 
    var dragTimeout; 

    $(document).on('dragenter', function(e) { 
     // dragenter code 
    }); 

    $(document).on('dragleave', function(e) { 
     dragTimeout = setTimeout(function() { 
      dragTimeout = undefined; 
      // your dragleave code 
     }); 
    }); 

    $(document).on('dragover', function(e) { 
     if (dragTimeout) { 
      clearTimeout(dragTimeout); 
      dragTimeout = undefined; 
     } 
    }); 
})();