htm5 浏览器文件拖拽到本地

<link href="css/default.css" rel="stylesheet" type="text/css" />
<style>
            .dragout {
              cursor: move;
              background: #ddd;
              padding: 6px;
              margin: 10px;
              border: 1px solid #666;
            }
          </style>
<div class="example">
              Drag each of these files onto your desktop:
              <a href="http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/intl/en/landing/chrome/cadie/glasses.pdf" class="dragout" data-downloadurl="application/pdf:Chrome3DGlasses.pdf:http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/intl/en/landing/chrome/cadie/glasses.pdf">.pdf file</a>
              <a href="src/star.mp3" class="dragout" data-downloadurl="audio/mpeg:star.mp3:http://slides.html5rocks.com/src/star.mp3">.mp3 file</a>
            </div>
            <p class="center" style="font-size:90%">( this feature is only available in Google Chrome )</p>
            <script defer>
              (function() {
                var files = document.querySelectorAll('.dragout');
                for (var i = 0, file; file = files[i]; ++i) {
                  file.setAttribute('draggable', 'true'); // Don't really need, but good practice.
                  file.addEventListener('dragstart', function(evt) {
                    evt.dataTransfer.setData('DownloadURL', this.getAttribute('data-downloadurl'));
                  }, false);
                }
              })();
            </script>
          </section>
        </div>