How do I detect a file is being dragged rather than a draggable element on my page?

后端未结

关注

 4  1690

没有蜡笔的小新 2020-12-29 01:30

I\'m using the html5 events to enable both file and element drag-and-drop. I\'ve attached the dragover event to the body and am using event delegations to show where a dragg

4条回答

醉酒成梦 (楼主)

2020-12-29 02:13

You can detect what is being dragged by inspecting dataTransfer.types. This behaviour is not (yet) consistent across browsers so you have to check for the existence of 'Files' (Chrome) and 'application/x-moz-file' (Firefox).

// Show the dropzone when dragging files (not folders or page
// elements). The dropzone is hidden after a timer to prevent 
// flickering to occur as `dragleave` is fired constantly.
var dragTimer;
$(document).on('dragover', function(e) {
  var dt = e.originalEvent.dataTransfer;
  if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))) {
    $("#dropzone").show();
    window.clearTimeout(dragTimer);
  }
});
$(document).on('dragleave', function(e) {
  dragTimer = window.setTimeout(function() {
    $("#dropzone").hide();
  }, 25);
});