آموزش 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;
});
})
ارسال نظر