HTML Drag and Drop - Kéo thả trong javascript

HTML Drag and Drop API - Kéo thả trong javascript

Trong HTML, bất kỳ phần tử nào cũng có thể được kéo và thả.

Hỗ trợ trình duyệt

Video tutorial

Truy cập youtube Lùn Dev để xem nhiều hơn

Ví dụ về kéo và thả trong HTML

Code HTML

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="left">
            <div class="item">
                <img src="img1.png" alt="" ondragstart="drag(event)">
            </div>
            <div class="item">
                <img src="img2.png" alt="" ondragstart="drag(event)">
            </div>
            <div class="item">
                <img src="img3.png" alt="" ondragstart="drag(event)">
            </div>
            <div class="item">
                <img src="img4.png" alt="" ondragstart="drag(event)">
            </div>
        </div>
        <div class="right">
            <div class="mockup">
                <div class="graphic"
                    ondrop="drop(event)" 
                    ondragover="allowDrop(event)"
                ></div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

Code CSS

  body{
    background-color: #241E48;
}
.container{
    display: grid;
    grid-template-columns: auto auto;
}
.left, .right{
    width:50%;
    padding-left: 5%;
    position: relative;
}
.left .item {
    width:300px;
    height:100px;
    background-color: #18142f;
    margin:30px auto;
    padding:10px;
    border-radius: 40px;
    transition:0.5s;
    text-align: center;
}
.left .item img{
    height:100%;
}
.left .item:hover{
    background-color:#5838D1;
}
.mockup{
    width:500px;
    height:600px;
    background-image: url(shirt.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top:30px;
    filter:drop-shadow(0 0 40px #121212);
    position: relative;
}
.graphic{
    width:200px;
    height: 200px;
    position: absolute;
    top:200px;
    left:50%;
    transform: translate(-50%);
    transition: 0.3s;
}
.graphic.drag{
    border:5px dotted #232020;
}
.graphic img{
    width:100%;
}

Code Javascript

  let itemSrc = null;
function drag(event){
    itemSrc = event.target.src;
    document.querySelector('.graphic').classList.add('drag');
}
function drop(event){
    var img = document.createElement('img');
    img.src = itemSrc;
    document.querySelector('.graphic').innerHTML = '';
    document.querySelector('.graphic').appendChild(img);
    document.querySelector('.graphic').classList.remove('drag');
}
function allowDrop(event){
    event.preventDefault();
}

Nó có vẻ phức tạp, nhưng chúng ta hãy xem xét tất cả các phần khác nhau của một sự kiện kéo và thả.

Kéo gì - ondragstart

Trong ví dụ trên, thuộc tính ondragstart gọi một hàm, kéo (sự kiện), chỉ định dữ liệu nào sẽ được kéo.

Thả ở đâu - ondragover

Sự kiện ondragover chỉ định nơi dữ liệu được kéo có thể được thả xuống.

Theo mặc định, không thể bỏ dữ liệu / phần tử trong các phần tử khác. Để cho phép giảm, chúng ta phải ngăn việc xử lý mặc định của phần tử.

Điều này được thực hiện bằng cách gọi phương thức event.preventDefault () cho sự kiện ondragover:

  event.preventDefault()

Thực hiện thả - ondrop

Khi dữ liệu được kéo bị loại bỏ, sự kiện rơi sẽ xảy ra. Trong ví dụ trên, thuộc tính ondrop gọi một hàm, drop (sự kiện).

  function drop(event){
    var img = document.createElement('img');
    img.src = itemSrc;
    document.querySelector('.graphic').innerHTML = '';
    document.querySelector('.graphic').appendChild(img);
    document.querySelector('.graphic').classList.remove('drag');
}