{"action":"opened","issue":{"url":"https://api.github.com/repos/HaoleiQ/Note/issues/21","repository_url":"https://api.github.com/repos/HaoleiQ/Note","labels_url":"https://api.github.com/repos/HaoleiQ/Note/issues/21/labels{/name}","comments_url":"https://api.github.com/repos/HaoleiQ/Note/issues/21/comments","events_url":"https://api.github.com/repos/HaoleiQ/Note/issues/21/events","html_url":"https://github.com/HaoleiQ/Note/issues/21","id":312784415,"number":21,"title":"HTML5文件拖拽","user":{"login":"HaoleiQ","id":12443107,"avatar_url":"https://avatars3.githubusercontent.com/u/12443107?v=4","gravatar_id":"","url":"https://api.github.com/users/HaoleiQ","html_url":"https://github.com/HaoleiQ","followers_url":"https://api.github.com/users/HaoleiQ/followers","following_url":"https://api.github.com/users/HaoleiQ/following{/other_user}","gists_url":"https://api.github.com/users/HaoleiQ/gists{/gist_id}","starred_url":"https://api.github.com/users/HaoleiQ/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HaoleiQ/subscriptions","organizations_url":"https://api.github.com/users/HaoleiQ/orgs","repos_url":"https://api.github.com/users/HaoleiQ/repos","events_url":"https://api.github.com/users/HaoleiQ/events{/privacy}","received_events_url":"https://api.github.com/users/HaoleiQ/received_events","type":"User","site_admin":false},"labels":[{"id":768114532,"url":"https://api.github.com/repos/HaoleiQ/Note/labels/Front-end","name":"Front-end","color":"7057ff","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-10T06:07:20Z","updated_at":"2018-04-10T06:07:20Z","closed_at":null,"author_association":"OWNER","body":"\r\n```html\r\n<!DOCTYPE html>\r\n<html lang=\"zh-CN\"> \r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>拖放操作</title>\r\n  <meta name=\"author\" content=\"汪磊\">\r\n  <link rel=\"stylesheet\" href=\"bootstrap.css\">\r\n  <style>\r\n    #target {\r\n      padding: 20px;\r\n      height: 300px;\r\n      border: 5px dashed #c0c0c0;\r\n      color: #e0e0e0;\r\n      font-size: 40px;\r\n      line-height: 260px;\r\n      text-align: center;\r\n      -webkit-user-select: none;\r\n      cursor: pointer;\r\n    }\r\n    \r\n    #target.actived {\r\n      border-color: #888;\r\n      color: #eaeaea;\r\n      box-shadow: 0 0 80px #e0e0e0 inset;\r\n    }\r\n  </style>\r\n</head>\r\n\r\n<body>\r\n  <div class=\"container\">\r\n    <div class=\"page-header\">\r\n      <h1>Drag&Drop</h1></div>\r\n    <div class=\"jumbotron\">\r\n      <p>你好啊，你今年几岁啊，哈哈，我的今天在哪里</p>\r\n      ![](toy.png)\r\n    </div>\r\n    <div id=\"target\">\r\n      Drag something into here\r\n      <ul id=\"result\" class=\"list-group\"></ul>\r\n    </div>\r\n    <br>\r\n  </div>\r\n  <script>\r\n    (function() {\r\n      // 找到目标位置框框\r\n      var target = document.querySelector('#target');\r\n      var fileList = document.querySelector('#result');\r\n      // 注册拖拽进入\r\n      target.addEventListener('dragenter', function() {\r\n        this.classList.add('actived');\r\n      });\r\n      // 离开\r\n      target.addEventListener('dragleave', function() {\r\n        this.classList.remove('actived');\r\n      });\r\n\r\n      // 如果想要捕获drop事件 就一定得在该事件中阻止默认事件\r\n      target.addEventListener('dragover', function(e) {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n      });\r\n\r\n      // 当元素放到该对象上\r\n      target.addEventListener('drop', function(e) {\r\n\r\n        if (e.dataTransfer.files.length) {\r\n          var files = e.dataTransfer.files;\r\n          for (var i = 0; i < files.length; i++) {\r\n            var li = document.createElement('li');\r\n            li.setAttribute('class', 'list-group-item');\r\n            // 创建信息的子节点\r\n            li.innerHTML = '<h5 class=\"list-group-item-heading\">' \r\n+ files[i].name + '</h5><p class=\"list-group-item-text\">' \r\n+ files[i].lastModifiedDate.toLocaleDateString() + ' ' \r\n+ files[i].lastModifiedDate.toLocaleTimeString() + ' ' \r\n+ (files[i].size / 1024).toFixed(2) + 'KB</p>';\r\n            fileList.appendChild(li);\r\n          }\r\n        } else {\r\n          // 短路运算\r\n          // var data = e.dataTransfer.getData('text/plain') \r\n|| e.dataTransfer.getData('text/uri-list');\r\n          var data = e.dataTransfer.getData('text/plain');\r\n          if (data) {\r\n            // 拖入的是文本\r\n            target.innerHTML = data;\r\n          } else {\r\n            var img = document.createElement('img');\r\n            img.src = e.dataTransfer.getData('text/uri-list');\r\n            target.appendChild(img);\r\n          }\r\n        }\r\n\r\n        this.classList.remove('actived');\r\n\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n      });\r\n\r\n    })();\r\n  </script>\r\n</body> \r\n</html>\r\n\r\n```\r\n"}}
{"actor":{"display_login":"HaoleiQ"}}