JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<script src="http://dl.dropbox.com/u/3531958/jquery-8753.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="dropzone">drop file here. results in console</div>

The result of dropping a file should be 2 items logged to the console. 
<ul>
    <li>The resultant event object produced by the "drop" event </li>
    <li>The resultant event object produced by a programmatic trigger of the "drop" event, that borrows the `dataTransfer` property from the first drop event object</li>
</ul>

<pre>
// Notable in this example:

// Calling the constructor like this will permanently add `dataTransfer` 
// to the list of jQuery.event.props that are copied from event.originalEvent
jQuery.Event( "drop", { dataTransfer: true });

// Which might then be used as:
$("#dropzone").bind( "drop", function( event ) {

  event.preventDefault();

  // event.dataTransfer is available!

});


// Later, the following usage is illustrated:
var dropEvent = jQuery.Event( "drop", { dataTransfer: event.dataTransfer });

// ... where `event.dataTransfer` was actually just borrowed from the event object
// that was created by the real `drop` event. This was done simply to illustrate 
// what we can do with this enhancement

$("#dropzone").trigger( dropEvent );

</pre>

CSS

#dropzone {
width: 200px;
height: 200px;
border:1px solid;
}

JavaScript

var origProps = (function(jQuery) { return jQuery.event.props; })(jQuery),
    handled = 0;

//  Log origProps for later comparison
console.log( origProps, origProps.length );

//  Create a new event with special properties
jQuery.Event( "drop", { dataTransfer: true });

//  Length should now be 1 greater then origProps
console.log(jQuery.event.props, jQuery.event.props.length);

$("#dropzone").bind( "dragenter dragover", false)
  .bind( "drop", function( event ) {

    event.preventDefault();

    // No longer need to look in event.originalEvent
    if ( event.dataTransfer ) {
      console.log(
        "event.dataTransfer exists",
        event.dataTransfer,
        event.dataTransfer.files
      );

      if ( ++handled < 2 ) {

        //  Reuse last dataTransfer object
        var dropEvent = jQuery.Event( "drop", { dataTransfer: event.dataTransfer });

        $("#dropzone").trigger( dropEvent );
      }
    }


  });