ngăn chặn mặc định với các sự kiện kéo trong Meteor

Question

Tôi đang cố triển khai chức năng kéo và thả cơ bản vào ứng dụng Meteor của mình. Tôi muốn người dùng có thể thả tệp (từ hệ thống tệp của họ) vào phần tử dom được chỉ định và truy xuất tệp đó trong đối tượng dataTransfer. Thật không may, tôi dường như không thể ngăn sự kiện tải lại toàn bộ trang trên sự kiện thả. Đây là trình xử lý sự kiện cơ bản của tôi:

Template.sideBar.events({ 

'drop #features' : function(e, t) { 

    e.preventDefault(); 

    var fileList = e.dataTransfer.files; 
    console.log(fileList[0]); 

    return false; 
} 

}); 

Tôi đã thử nghiệm điều này với Chrome và Firefox. Tui bỏ lỡ điều gì vậy? Có ai đã triển khai thành công không?

Answer 1

Vâng, điều đó thật ngớ ngẩn. Tôi nghĩ tôi đã tìm ra. Bạn cần gọi số preventDefault() trên sự kiện dragover ngoài sự kiện drop. Đây là mã làm việc của tôi:

Template.sideBar.events({ 

    'dragover #features' : function(e, t) { 
    e.preventDefault(); 
    $(e.currentTarget).addClass('dragover'); 
    }, 

    'dragleave #features' : function(e, t) { 
    $(e.currentTarget).removeClass('dragover'); 
    }, 

    'drop #features' : function(e, t) { 
    e.preventDefault(); 
    console.log('drop!'); 
    } 

}); 

Không chắc chắn lý do tại sao nó hoạt động, nhưng nó (ít nhất là trong Chrome).

Answer 2

Đang cập nhật để meteor@1.4.1, bạn cũng cần phải gọi phương thức dataTransfer.getData() để lấy dữ liệu tập tin giảm (nếu bạn đang sử dụng kéo n' thả để upload file)

'drop #features' : function(e, t) { 
    e.preventDefault(); 
    console.log('drop!'); 

    e.originalEvent.dataTransfer.getData("text"); 
    //without the previous line you won't be able to get dropped file data; 
    console.log('File name: ' + e.originalEvent.dataTransfer.files[0].name); 
}