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

آموزش 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;
	});
})


دانلود پروژه drag and drop


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

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

پکیج غول آموزش برنامه نویسی PHP با ساخت فروشگاه { دیجیکالا }


This will close in 0 seconds