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>
출력
답변을 드래그하기 전에 -
답변을 드래그한 후 -