آموزش کشیدن پیام به راست ، مشابه اپلیکیشن تلگرام

خوب تلگرام امروزه شاید محبوب ترین اپلیکیشن انتقال پیام در بین کاربران ایرانی باشد و همه ما از آن در گوشی هایمان استفاده میکنیم.

حتما تا به حال تجربه درگ کردن یا کشیدن یک پیام به سمت راست یا چپ را در این اپلیکیشن داشته اید. با این کار گزینه های متفاوتی نمایان میشود مانند آرشیو، حذف و…

حال ما در مدرسه طراحی سایت پرنیان و در یکی از جلسات کلاس جاوا اسکریپت و به سفارش یکی از دانشجویان، این کد را نوشته و به دانشجویان آموزش دادیم.

تصمیم بر این شد که آن را بصورت رایگان در اختیار شما نیز قرار دهیم. کد را دانلود کرده و از آن لذت ببرید.

دانلود کامل سورس کد

همچنین کد کامل html,css, javascript را در زیر آورده ایم:


    <title>Telegram List</title>
    <style>
        *{padding: 0;margin: 0;box-sizing: border-box;}
        ul{
            width: 500px;
            margin: 100px auto;
            border: 1px solid red;
            list-style: none;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            overflow-x: hidden;
            >li{
                position: relative;
                text-align: center;
                background: cyan;
                padding: 20px 0;
                border-bottom: 2px solid gray;
                font-size: 20px;
                font: bold;
                transition: 1s;
                *{
                    transform: translate(0) !important;
                }

                >span {
                    pointer-events: none;
                    user-select: none;
                }
                >h5{
                    position: absolute;
                    width: 100px;
                    height: 100%;
                    background: blueviolet;
                    top: 0;
                    border: 2px solid gray;

                    &:nth-of-type(1){
                        left: -100px;
                        
                    }
                    &:nth-of-type(2){
                        right: -100px;
                    }
                }
            }
        }
    </style>
</head>
<body data-rsssl=1>
    <ul class="box">
        <li>
            <span>Lorem, ipsum.</span>
            <h5>Delete</h5>
            <h5>Edit</h5>
        </li>
        <li>
            <span>Lorem, ipsum.</span>
            <h5>Delete</h5>
            <h5>Edit</h5>
        </li>
        <li>
            <span>Lorem, ipsum.</span>
            <h5>Delete</h5>
            <h5>Edit</h5>
        </li>
        <li>
            <span>Lorem, ipsum.</span>
            <h5>Delete</h5>
            <h5>Edit</h5>
        </li>
        <li on="">
            <span>Lorem, ipsum.</span>
            <h5>Delete</h5>
            <h5>Edit</h5>
        </li>
        <li>
            <span on="">Lorem, ipsum.</span>
            <h5>Delete</h5>
            <h5>Edit</h5>
        </li>
    </ul>
    <script>
        const lists = document.querySelectorAll('li')
        let clicked = 0
        
        lists.forEach((list)=>{
            list.addEventListener("mousedown", (e)=>{
                list.addEventListener('mousemove', move)
                clicked = e.offsetX
            })

            list.addEventListener('mouseup', ()=>{
                list.removeEventListener('mousemove', move)
            })

            list.addEventListener('mouseout', ()=>{
                list.removeEventListener('mousemove', move)
            })
        })

        // mobile
        lists.forEach((list)=>{
            list.addEventListener("pointerdown", (e)=>{
                list.addEventListener('pointermove', move)
                clicked = e.offsetX
                event.stopPropagation()
            })

            list.addEventListener('pointerup', ()=>{
                list.removeEventListener('pointermove', move)
                event.stopPropagation()
            })

            list.addEventListener('pointerout', ()=>{
                list.removeEventListener('pointermove', move)
            })
        })

        function move(e){
            _li = e.target
            event.stopImmediatePropagation
            x = e.offsetX
            // console.log(clicked);
            // console.log(x);
            if((x - 40) > clicked){
                _li.style.transform = `$translateX(${x-clicked}px)`
                _li.style.transform = `translateX(100px)`
            }else if((x + 40) < clicked ){
                _li.style.transform = `translateX(${x-clicked}px)`
                _li.style.transform = `translateX(-100px)`
            }else{
                _li.style.transform = `translateX(${x}px)`
                _li.style.transform = `translateX(0px)`
            }
            // clicked = x
        }
    </script>

امیدواریم از این مقاله آموزش ساخت پسورد قوی با جاوا اسکریپت نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.