HTML, CSS 및 Sortable JS를 사용하여 드래그 앤 드롭 또는 정렬 가능한 목록

안녕하세요 친구 여러분, 오늘 이 블로그에서는 HTML, CSS 및 Sortable JS를 사용하여 드래그 앤 드롭 또는 정렬 가능한 목록을 만드는 방법을 배웁니다. 이전 블로그에서 how to create drag & drop or browse features in Javascript을 보았습니다. 이전에 javascript과 관련된 많은 프로젝트를 공유했으며 원하는 경우 확인할 수 있으며 확인하는 것을 잊지 마십시오 HTML, CSS, and Javascript projects .

드래그 앤 드롭은 사용자가 가상 ​​사물을 "잡아"별도의 영역이나 다른 가상 사물로 드래그하여 선택하는 마킹 장치 제스처입니다. Sortable JS는 목록 항목을 드래그 앤 드롭하여 목록을 정렬하거나 재정렬할 수 있는 Javascript 라이브러리입니다.

다음을 좋아할 수 있습니다.


  • How to create a toast alert
  • Restaurant Menu With Filter Option in React JS
  • How to create a todo list app
  • Awesome Neumorphism Social Icon Button with Tooltip

  • 이 프로그램 [Drag & Drop List or Sortable List]에는 웹 페이지에 5개의 목록 또는 카드가 있으며 이들은 드래그 가능한 항목 또는 목록입니다. 사용자는 하위 순서 목록의 항목을 쉽게 재정렬하여 특정 작업 및 수정에 대한 시각적 차원을 제공할 수 있습니다. 내가 말하는 것을 이해하는 데 어려움이 있다면. 소스 코드를 확인하거나 미리 볼 수 있습니다.

    미리보기를 사용할 수 있습니다here .

    HTML 코드




    <!DOCTYPE html>
    <html lang="en">
    <!-- --------------------- Created By InCoder --------------------- -->
    <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>Drag & drop or sortable List - InCoder</title>
        <link rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    </head>
    
    <body>
        <div class="container">
            <div class="title">
                <h3>Drag & drop or sortable List</h3>
            </div>
            <div class="items">
                <div class="item">
                    <p>Dragable Item 1</p>
                    <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span>
                </div>
                <div class="item">
                    <p>Dragable Item 2</p>
                    <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span>
                </div>
                <div class="item">
                    <p>Dragable Item 3</p>
                    <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span>
                </div>
                <div class="item">
                    <p>Dragable Item 4</p>
                    <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span>
                </div>
                <div class="item">
                    <p>Dragable Item 5</p>
                    <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span>
                </div>
                <div class="item">
                    <p>Dragable Item 6</p>
                    <span class="moveHand"><i class="fa-solid fa-grip-lines"></i></span>
                </div>
            </div>
        </div>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
    
        <script>
            let items = document.querySelector('.items')
    
            new Sortable(items, {
                animation: 200,
                handle: '.moveHand',
                ghostClass: 'drag'
            });
        </script>
    </body>
    
    </html>
    


    CSS 코드




    /* --------------------- Created By InCoder --------------------- */
    
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
    
    body{
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
        background-color: #1c015e;
    }
    
    .container{
        padding: .5rem 1rem;
        border-radius: .5rem;
        background-color: #fff;
        width: clamp(20rem, 4vw, 25rem);
    }
    
    .container .title {
        text-align: center;
        margin-bottom: .5rem;
    }
    
    .container .item {
        display: flex;
        color: #fff;
        margin: .3rem 0;
        align-items: center;
        border-radius: .3rem;
        padding: .5rem .5rem;
        background-color: #1c015e;
        justify-content: space-between;
    }
    
    .container .item span {
        width: 2rem;
        height: 2rem;
        cursor: move;
        display: grid;
        place-items: center;
    }
    
    .container .item span:hover,
    .container .item.drag {
        background-color: #2e0e7c;
    }
    

    좋은 웹페이지 즐겨찾기