آموزش drag and drop در جاوا اسکریپت ( کشیدن و رها کردن )

drag and drop جاوااسکریپت – در این آموزش قرار هست که یاد بگیریم چگونه با event های drag و drop که همان کشیدن و رها کردن می باشد کار کنیم .
در این مقاله با 7 رویدار کار خواهیم کرد و همچنین یکی مینی پروژه برای درک بهتر این موضوع تدارک دیده ایم که میتوانید دموی ویدیویی آن را در زیر مشاهده کنید .
دموی پروژه
7 رویداد ( event ) مربوط به drag and drop
شامل ایونت های drag , drop , dragstart و …
1- رویداد drag
زمانی رخ می دهد که element مورد نظر خودمان را کشیده و رها می کنیم از زمان شروع تا پایان را شامل می شود .
document.addEventListener("drag" , handler);
2- رویداد dragstart
همان طور که از نام آن پیداست یک بار اجرا شده و آن هم زمانی که element را می کشیم .
document.addEventListener("dragstart" , handler);
3- رویداد dragend
آخرین رویداد می باشد زمانی که element رها می شود .
document.addEventListener("dragend" , handler);
4- رویداد dragenter
زمانی که المنت کشیده شده وارد یک المنت دیگر می شود .
document.addEventListener("dragenter" , handler);
5- رویداد dragleave
مخالف رویداد dragenter یعنی زمانی که خارج می شود .
document.addEventListener("dragleave" , handler);
6- رویداد dragover
مشابه dragenter با این تفاوت که تا زمانی که در المنت وارد شده موس تکان می خورد این رویداد اجرا می شود .
document.addEventListener("dragover" , handler);
7- رویداد drop
زمانی که المنت را بر روی یک موقعیت رها می کنیم .
document.addEventListener("drop" , handler);
پروژه کاربردی با مباحثی که یاد گرفتیم .
حال با مواردی که یاد گرفتیم می توانیم یک پروژه را انجام دهیم .
فایل index.html
<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>Rapidcode.iR - سورس کد</title> <link rel="stylesheet" href="static/css/main.css"> </head> <body> <div class="container"> <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a> <ul> <li class="drop-zone"> <div draggable="true" id="draggable-element">item</div> </li> <li class="drop-zone"></li> <li class="drop-zone"></li> <li class="drop-zone"></li> </ul> </div> <script src="static/js/app.js"></script> </body> </html>
فایل main.css
ul{ list-style: none; } ul li{ background-color: tomato; display: block; height: 25px; margin-top: 5px } #draggable-element{ background-color: green; display: inline-block; color: white; height: 25px; width: 50px; cursor: pointer; }
اسکریپت app.js
// functions function dragStart(e){ const element = e.target; draggedDOM = element; element.style.opacity = 0.7; } function dragEnter(e){ const dropZone = this; const dragedElement = dropZone.querySelector("#draggable-element"); if(dragedElement) return false; dropZone.appendChild(draggedDOM); } function dragDroped(e){ // prevent to automatically open some files e.preventDefault(); const dropZone = this; dropZone.appendChild(draggedDOM); } // DOM const dropZone = document.getElementsByClassName("drop-zone"); window.draggedDOM = null; Array.from(dropZone).forEach(function(element){ element.addEventListener("dragstart" , dragStart); element.addEventListener("dragenter" , dragEnter); element.addEventListener("dragover" , function(event){ // prevent to let event drop trigger event.preventDefault(); }); element.addEventListener("drop" , dragDroped); element.addEventListener("dragend" , function(e){ draggedDOM.style.opacity = 1; }); })
ارسال نظر