46. Drag/Drop Trong HTML

Drag/Drop trong HTML: Kỹ thuật kéo và thả (Drag and Drop) trong HTML cho phép bạn kéo một phần tử trên trang và thả nó vào vị trí khác. Điều này cung cấp một cách tương tác trực quan để di chuyển và sắp xếp các phần tử trên trang web. Để thực hiện kéo và thả, bạn cần sử dụng sự kết hợp của sự kiện JavaScript và CSS để tạo ra hiệu ứng kéo và thả.

Dưới đây là một ví dụ đơn giản về cách thực hiện kéo và thả trong HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Example</title>
    <style>
        .draggable {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            cursor: move;
        }
        .droppable {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Drag and Drop Example</h1>
    
    <div class="draggable" draggable="true">Drag me</div>
    
    <div class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)">
        Drop here
    </div>
    
    <script>
        function allowDrop(event) {
            event.preventDefault();
        }

        function drop(event) {
            event.preventDefault();
            var data = event.dataTransfer.getData("text");
            event.target.appendChild(document.getElementById(data));
        }
    </script>
</body>
</html>

Trong ví dụ trên:

Chúng ta đã tạo một phần tử có class draggable mà bạn có thể kéo và thả.
Thuộc tính draggable="true" cho phép phần tử được kéo.
Chúng ta đã tạo một phần tử có class droppable để làm nơi thả.
Sự kiện ondragover ngăn chặn hành vi mặc định khi kéo phần tử vào vùng thả.
Sự kiện ondrop xử lý việc thả phần tử vào vùng thả và sử dụng event.dataTransfer.getData("text") để lấy dữ liệu từ phần tử kéo và đặt nó vào vùng thả.

Vui lòng lưu ý rằng việc thực hiện kéo và thả có thể phức tạp hơn với các tính năng bổ sung như việc giới hạn vị trí thả, tạo hiệu ứng khi kéo và thả, và xử lý các sự kiện khác.

Leave a Comment Cancel Reply