Thuộc tính draggable trong HTML DOM trả về hoặc thiết lập một giá trị boolean chỉ định xem một phần tử có thể kéo thả hay không.
LƯU Ý – Liên kết và hình ảnh mặc định có thể kéo thả.
Ví dụ
Ví dụ minh họa thuộc tính HTML draggable:
<!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)">Phần của Paula</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)">Phần của Adam</div> <div id="display">Phân chia 8 miếng pizza giữa Adam và Paula tỷ lệ 3:5</div> </body> </html>
Kết quả
Trước khi kéo thả đáp án:
Sau khi kéo thả đáp án:
