Book Image

NW.js Essentials

By : Alessandro Benoit, Roger Weng
Book Image

NW.js Essentials

By: Alessandro Benoit, Roger Weng

Overview of this book

Table of Contents (17 chapters)
NW.js Essentials
About the Author
About the Reviewers

Opening files through file dragging

Many native desktop applications provide an alternative way to open files by just dragging them over the application. In order to implement this functionality, we can take advantage of HTML5 APIs. As this is actually beyond the purpose of the book but still very useful, I will report an example to simplify the task:

<div id="dropFileHere">Drop File Here</div>

#dropFileHere { display: block;background: #f00; }
#dropFileHere.hover { background: #0f0; }

  // Prevent default drop file behaviors
  window.ondragover = function(e) { e.preventDefault(); };
  window.ondrop = function(e) { e.preventDefault(); };

  var holder = document.getElementById('dropFileHere');
  holder.ondragenter = function() { this.className = 'hover'; };
  holder.ondragleave = function() { this.className = ''; };
  holder.ondrop = function(e) {
    this.className = '';
    for (var i = 0; i < e.dataTransfer...