7995


現在は下記ソースのように、四角枠内(dropエリア)にdropするとそのファイル情報が表示されます。

しかし、ファイル情報によってdropエリアの範囲が狭くなってしまうので、これを改善したいと考えてます。

そこで、下の①か②の方法で改善しようと考えています。  
①四角枠内にファイルをドラッグオーバーしたら、別でdropエリアを四角枠内に表示させるようにする  
→javascriptから「別でdrop用のエリアを出現させる」部分の実装方法が分からないので教えて欲しいです。

②四角枠内の文字をドラッグオーバー中だけ非表示にする  
→innerHTMLを非表示にする方法が分からないので教えて欲しいです。

①または②の問題が解決出来る方がいましたら、ご教授をお願いします。

[code]

    (function() {
    
        function $id(id) {
      return document.getElementById(id);
     }
    
    
     function Output(msg) {
         var m = $id("filedrag");
      m.innerHTML = msg + m.innerHTML;
     }
        // ドラッグオーバー時イベント
     function FileDragHover(e) {
         e.stopPropagation();
         e.preventDefault();
      e.target.className = (e.type == "dragover" ? "hover" : "");
     }
    
    
     function FileSelectHandler(e) {
    
      FileDragHover(e);
    
      var files = e.target.files || e.dataTransfer.files;
    
      for (var i = 0, f; f = files[i]; i++) {
       ParseFile(f);
      }
     }
    
     function ParseFile(file) {
      Output(
       "<p id = 'MessageParagraph'>name: <strong>" + file.name +
       "</strong> size: <strong>" + file.size +
       "</strong> bytes" +
                "</p>"
      );
    
     }
    
     $(function () {
         $(document).on('drop dragover', function (e) {
             e.stopPropagation();
             e.preventDefault();
         });
     });
    
     function Init() {
    
      var fileselect = $id("fileselect"),
       filedrag = $id("filedrag"),
       submitbutton = $id("submitbutton");
          AddFiles = $id("AddFiles")
    
      fileselect.addEventListener("change", FileSelectHandler, false);
            
      var xhr = new XMLHttpRequest();
      if (xhr.upload) {
    
       filedrag.addEventListener("dragover", FileDragHover, false);
       filedrag.addEventListener("dragleave", FileDragHover, false);
       filedrag.addEventListener("drop", FileSelectHandler, false);
    
       filedrag.style.display = "block";
    
       AddFiles.style.display = "none";
    
       fileselect.style.display = "none";
      }
    
     }
    
     // 
     if (window.File && window.FileList && window.FileReader) {
      Init();
     }
    
    
    })();
[/code]

[code]

    /*
    Styles for HTML5 File Drag & Drop demonstration
    Featured on SitePoint.com
    Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
    */
    body
    {
     font-family: "Segoe UI", Tahoma, Helvetica, freesans, sans-serif;
     font-size: 90%;
     margin: 10px;
     color: #333;
     background-color: #fff;
    }
    
    #divBody
    {
     width: 550px;  
        margin: 0 auto;  
        text-align: left; 
    }
    
    #AddFiles{
        width: 100px;
        height: 25px;
    }
    
    
    
    #filedrag
    {
     display: none;
     margin: 1em 0;
     border: 2px dashed #555;
     cursor: default;
        padding: 0 10px;
     border: 1px solid #999;
        width : 550px ;
        height:200px;
        width : 560px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    
    #filedrag.hover
    {
     color: #f00;
     border-color: #f00;
     border-style: solid;
     box-shadow: inset 0 3px 4px #888;
    }
    #MessageParagraph
    {
        border-bottom:solid 1px;
        height:30px;
    }
    
    
    #messages
    {
     padding: 0 10px;
     margin: 0;
     border: 1px solid #999;
        width : 550px ;
        height:200px;
        width : 560px ;
        overflow-y: scroll;
        overflow-x: hidden;
        
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <meta charset="UTF-8" />
        <title>Upload</title>
        <link rel="stylesheet" type="text/css" media="all" href="styles.css" />
    </head>
    <body>
        <div id="divBody">
            
            <form id="upload" action="index.html" method="POST" enctype="multipart/form-data">
    
                <div>
                    <div id="filedrag">
                        <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
                    </div>
                </div>
    
                <div>
                    <button id="AddFiles" type="button" onclick="document.getElementById('fileselect').click();">Add Files....</button>
                    <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
                </div>
            </form>
    
    
    
            <script src="filedrag.js"></script>
        </div>
    </body>
    </html>
[/code]


CC BY-SA 3.0
2015-03-16T06:59:53.943
7971
2015-03-17T02:35:42.777
2015-03-17T01:14:11.653
7626
7626
question
javascript html css
四角枠内にファイルをドラッグオーバーした際、ドロップ用のエリアを表示させたい または、 innerHTMLを非表示にしたい


ドラッグ領域と、テキストを挿入する対象が同じ要素`#filedrag`になっていることが良くないのではないかと思いました。

四角枠内にファイルをドラッグオーバーしたら、別でdropエリアを表示させるという発想を転換し、はじめから四角枠内にドラッグ領域表示させれば良いと思います。

つまり、現在のドラッグ領域の外に、テキストを挿入するための新しいコンテナ`<div
id="filelist"></div>`など作成し、それらを更なる新しい`div`で囲って`border: 1px solid
#999;`してみてはいかがでしょうか。

話がそれますが、コードを見たところjQueryを利用しているように思いますが`function
$id(id)`などを独自定義していることも気になりました。jQueryを利用するならば`var m =
$id("filedrag");`は初めから`var m = $("#filedrag")`と記述できます。


CC BY-SA 3.0
2015-03-17T00:41:18.097
7992
2015-03-17T00:53:21.980
2015-03-17T00:53:21.980
8351
8351
7971
answer


②の解決方法です

[code]

                <div id="filedrag">
                    <div id="innerHTML用">
                      ～
                    </div>
                </div>
    
[/code]

上記の構成で、innerHTMLはinnerHTML用divに出力します。

表示/非表示にはstyle.display = "block" or "none";を使用して、  
innerHTML用divをドラッグオーバーイベントで非表示にし、innerHTML出力後に表示に戻します。

しかしdropしていない場合はinnerHTMLが非表示のままになってしまいます。  
↓

[code]

    　　// ドラッグオーバー時イベント
        function FileDragHover(e) {
    　　　　// innerHTMLを非表示
            var m = $id("massageArea");
            m.style.display = "none";
            // イベントハンドラの伝播抑制
            e.stopPropagation();
            // ブラウザの挙動抑制
            e.preventDefault();
            // クラス名取得
            e.target.className = (e.type == "dragover" ? "hover" : "");
            m.style.display = "block";
    
[/code]

ひとつのfunction内で表示/非表示の処理を実行すると、上手く動作しています。  
おそらく、かなりごり押しの方法だと思います。


CC BY-SA 3.0
2015-03-17T01:42:21.107
7995
2015-03-17T02:35:42.777
2015-03-17T02:35:42.777
7626
7626
7971
answer