icebox-app/index.html at master · psdparse/icebox-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>IceBox</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;

    }

    .box {
      width: 100%;
      height: 100%;
      background-color: #eceff3;
      color:#262626;
      display:table;
      -webkit-app-region: drag;  /* 追加 */
    }
    .drag-area-deco{
      color: #7a7a7c;
      font-size: 24px;
      text-align:center;
      fill: #7A7A7C;
      display:table-cell;
      vertical-align: middle;
    }

    .drag-area-deco:hover{
      color: #4cb5e8;
      font-size: 24px;
      text-align:center;
      fill: #4cb5e8;
    }

    #holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
    #holder.hover { border: 10px dashed #333; }
  </style>
</head>
<body>
  <div id="holder"></div>
  <script>
  function $(id){
    return document.getElementById(id);
  }
  // prevent default behavior from changing page on dropped file
  window.ondragover = function(e) { e.preventDefault(); return false };
  window.ondrop = function(e) { e.preventDefault(); return false };

  var holder = document.getElementById('holder');
  holder.ondragover = function () { this.className = 'hover'; return false; };
  holder.ondragleave = function () { this.className = ''; return false; };
  holder.ondrop = function (e) {
    e.preventDefault();

    for (var i = 0; i < e.dataTransfer.files.length; ++i) {
      console.log(e.dataTransfer.files[i].path);
    }
    return false;
  };
  </script>
</body>
</html>