Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

HTML5を使用したJavaScriptファイルのドロップ

ドラッグアンドドロップ（DnD）は、マウスクリックを使用してアイテムのコピー、並べ替え、および削除を簡単に行える強力なユーザーインターフェイスの概念です。これにより、ユーザーは要素の上でマウスボタンをクリックして押したまま、別の場所にドラッグし、マウスボタンを離して要素をそこにドロップできます。

ドラッグアンドドロップの場合：

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #boxA, #boxB {float:left;padding:10px;margin:10px; -moz-user-select:none;}
         #boxA { background-color: #6633FF; width:75px; height:75px; }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>

      <script>
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         <div id = "boxA" draggable = "true"
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         <div id = "boxB">Dustbin</div>
      </center>
   </body>
</html>

  1. JavaScriptのファイルとFileReader？

    以下は、JavaScriptでファイルとfileReaderを表示するコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>

  2. HTML5でドラッグアンドドロップを使用するにはどうすればよいですか？

    ドラッグアンドドロップ（DnD）は、マウスクリックを使用してアイテムのコピー、並べ替え、削除を簡単に行える強力なユーザーインターフェイスの概念です。これにより、ユーザーは要素の上でマウスボタンをクリックして押したまま、別の場所にドラッグし、マウスボタンを離して要素をそこにドロップできます。 従来のHTML4でドラッグアンドドロップ機能を実現するには、開発者は複雑なJavascriptプログラミングまたはjQueryなどの他のJavascriptフレームワークを使用する必要があります。 HTML 5では、ブラウザにネイティブDnDサポートを提供するドラッグアンドドロップ（DnD）APIが登場し