防止HTML元素被拖放

Question

I want to allow users to drag and drop a file for uploading. However, I do not want them to be able to drag and drop HTML images/links that are already on the page.

The catch: these images and links will be in a contentEditable container, so disabling dragging on them isn't desirable. The goal is to simply prevent the dropzone from lighting up when you drag a non-file over it.

For example:

 $(function() { $('#drop') .on('dragover', function(event) { event.preventDefault(); $('#drop').addClass('active'); }) .on('dragleave drop', function(event) { event.preventDefault(); $('#drop').removeClass('active'); }); }); 

 body { font-family: sans-serif; } #drop { border: dashed 3px #888; padding: 20px; } #drop.active { background: black; color: white; } ol { margin: 20px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="drop"> DROP HERE </div> <ol> <li>Try dragging a file from your computer over it. This is acceptable.</li> <li>Now try dragging the image below image over it. This is not acceptable.</li> <li><a href="#">Try dragging this link over it, too! Also not acceptable.</a></li> </ol> <p> <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"> </p> <p> The goal here is to prevent the dropzone from lighting up when you drag a non-file over it, but to not disable dragging entirely on these types of elements. </p> 

Answer 1

The solution I was looking for is to check for the data transfer type. If it contains Files , there is at least one file being dragged/dropped so we should activate and allow it. Otherwise, we can simply ignore the drag/drop actions.

$('#drop')
  .on('dragover', function(event) {
    event.preventDefault();

    // Only activate dropzone if the user is dragging a file
    if( $.inArray('Files', event.originalEvent.dataTransfer.types) === -1 ) {
      return;
    }


    $('#drop').addClass('active');
  })
  .on('dragleave drop', function(event) {
    event.preventDefault();

    // Only accept drops if the user is dropping a file
    if( $.inArray('Files', event.originalEvent.dataTransfer.types) === -1 ) {
      return;
    }

    $('#drop').removeClass('active');
  });