HTMLドラッグ可能属性
HTML DOMドラッグ可能属性は、要素がドラッグ可能かどうかを指定するブール値を返す/設定します。
注 −リンクと画像はデフォルトでドラッグ可能です。
HTMLドラッグ可能の例を見てみましょう 属性-
例
<!DOCTYPE html> <html> <head> <title>HTML DOM draggable</title> <style> * { padding: 2px; margin:5px; } form { width:70%; margin: 0 auto; text-align: center; } fieldset { min-height: 200px; } input[type="button"] { border-radius: 10px; } .options{ display: inline-block; } #paulaShare { width: 200px; height: 70px; padding: 10px; border: 2px solid black; } #adamShare { width: 200px; height: 70px; padding: 10px; border: 2px solid black; } </style> <script> function allowDrop(dragEvent) { dragEvent.preventDefault(); } function drag(dragEvent) { dragEvent.dataTransfer.setData("Text", dragEvent.target.id); } function drop(dragEvent) { var data = dragEvent.dataTransfer.getData("Text"); dragEvent.target.appendChild(document.getElementById(data)); dragEvent.preventDefault(); } </script> </head> <body> <form> <fieldset> <legend>HTML-DOM-draggable</legend> <div class="options" id="paulaShare" ondrop="drop(event)" ondragover="allowDrop(event)">Paula's Share</div><br> <div class="options"> <p id="optionOne" draggable="true" ondragstart="drag(event)">3/8</p> <p id="optionTwo" draggable="true" ondragstart="drag(event)">5/8</p> </div><br> <div class="options" id="adamShare" ondrop="drop(event)" ondragover="allowDrop(event)">Adam's Share</div> <div id="display">Distribute 8 pizza slices between Adam and Paula in ration 3:5</div> </body> </html>
出力
回答をドラッグする前に-
回答をドラッグした後-
-
HTMLパターン属性
HTMLパターン属性は、HTML要素の値がHTMLドキュメントで一致する正規表現を定義します。 構文 以下は構文です- <input pattern=”regular expression”> HTMLパターン属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { color: #000; height: 100vh;
-
HTMLラップ属性
HTML wrap属性は、フォームがHTMLドキュメントで送信されたときにテキスト領域のテキストをどのように折り返すかを定義します。 構文 以下は構文です- <textarea wrap=”hard | soft”></textarea> HTMLラップ属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { color: #000; height: