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

HTML5でドラッグ可能な段落を作成する

ドラッグ可能なを使用する ドラッグ可能な段落を作成するための属性。 有効にする または無効にする 値を使用したドラッグtrue およびfalse 。

例

次のコードを実行して、ドラガブルを実装してみてください。 要素と要素をドラッグ-

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         .drag {
            float: left;
            width: 100px;
            height: 75px;
            border: 1px dashed #876587;
            margin: 15px;
            padding: 10px;
         }
      </style>
   </head>

   <body>
      <div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)">
         <p ondragstart = "dragStart(event)" ondrag = "draggingNow(event)"
         draggable = "true" id = "dragtarget">This is demo paragraph to be dragged!</p>
      </div>
      <div class = "drag" ondrop="drop(event)" ondragover = "dropNow(event)"></div>
      <div id="box"></div>
      <p>Drag the left box to the right or drag the right box to the left.</p>
      <script>
         function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
         }
         function draggingNow(event) {
            document.getElementById("box").innerHTML = "Dragged successfully!";
         }
         function dropNow(event) {
            event.preventDefault();
         }
         function drop(event) {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            document.getElementById("box").innerHTML = "The element dropped successfully!";
         }
      </script>
   </body>
</html>

  1. HTMLオンホイールイベント属性

    HTML onwheelイベント属性は、ユーザーがHTMLドキュメントのHTML要素上でマウスのホイールを動かすとトリガーされます。 構文 以下は構文です- <tagname onwheel=”script”>Content</tagname> HTMLオンホイールイベント属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style>    body {       color: #000;  

  2. HTMLonscrollイベント属性

    HTML onscrollイベント属性は、HTMLドキュメントでスクロールバーを使用してHTML要素がスクロールされたときにトリガーされます。 構文 以下は構文です- <tagname onscroll=”script”></tagname> HTMLonscrollイベント属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style>    body {       color: #000; &nbs