آموزش HTML - کشیدن و رها کردن

HTML Drag and Drop API یک رابط برنامه نویسی است که به شما امکان می دهد برنامه های وب ایجاد کنید که در آن کاربران می توانند اشیاء را از یک مکان به مکان دیگر بکشند و رها کنند. API مجموعه‌ای از رویدادها و روش‌ها را فراهم می‌کند که به شما امکان می‌دهد تا تعاملات کشیدن و رها کردن سفارشی را برای صفحات وب خود ایجاد کنید.

HTML Drag and Drop API با تعریف عناصر قابل کشیدن در یک صفحه وب کار می کند. این عناصر می توانند توسط کاربر جابجا شوند، و هنگامی که آنها در یک منطقه هدف رها می شوند، API مجموعه ای از رویدادها را راه اندازی می کند که می توانید از آنها برای مدیریت تعامل استفاده کنید.

در اینجا برخی از مفاهیم و اصطلاحات کلیدی وجود دارد که باید هنگام کار با HTML Drag and Drop API با آنها آشنا باشید:

Draggable: عنصری که کاربر می تواند آن را جابجا کند.
Dragging: فرآیند حرکت یک عنصر قابل کشیدن در اطراف صفحه نمایش.
Drop target: ناحیه ای روی صفحه که می تواند یک عنصر کشیده شده را دریافت کند.
Drag events: مجموعه ای از رویدادها که هنگام شروع، حرکت یا پایان یک عملیات کشیدن توسط کاربر آغاز می شوند.

در اینجا یک مثال ساده از نحوه استفاده از HTML Drag and Drop API آورده شده است:

<!DOCTYPE html>
<html>
<head>
	<title>مثال کشیدن و رها کردن </title>
	<style>
		#dragme {
			width: 100px;
			height: 100px;
			background-color: red;
			color: white;
			text-align: center;
			padding-top: 40px;
			cursor: move;
		}
		#drophere {
			width: 200px;
			height: 200px;
			background-color: gray;
			margin-top: 20px;
		}
	</style>
	<script>
		function allowDrop(event) {
			event.preventDefault();
		}

		function drag(event) {
			event.dataTransfer.setData("text", event.target.id);
		}

		function drop(event) {
			event.preventDefault();
			var data = event.dataTransfer.getData("text");
			event.target.appendChild(document.getElementById(data));
		}
	</script>
</head>
<body>
	<div id="dragme" draggable="true" ondragstart="drag(event)">Drag me!</div>
	<div id="drophere" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
</body>
</html>

این مثال یک عنصر قابل کشیدن با شناسه "dragme" و یک عنصر هدف drop با شناسه "drophere" ایجاد می کند. مشخصه draggable برای عنصر قابل کشیدن روی true تنظیم می شود و زمانی که کاربر شروع به کشیدن عنصر می کند از ویژگی ondragstart برای فراخوانی تابع drag() استفاده می شود.

تابع allowDrop () زمانی فراخوانی می شود که کاربر عنصر را روی هدف drop می کشد و از عملکرد پیش فرض مرورگر جلوگیری می کند. تابع drop() زمانی فراخوانی می شود که کاربر عنصر را روی هدف drop می اندازد و شناسه عنصر حذف شده را بازیابی می کند و آن را به هدف drop اضافه می کند.

توجه داشته باشید که همه مرورگرها از HTML Drag and Drop API پشتیبانی نمی‌کنند، بنابراین ممکن است لازم باشد از یک کتابخانه یا چارچوب برای ایجاد تعاملات کشیدن و رها کردن بین مرورگرها استفاده کنید.

موقعیت جغرافیایی - درس قبلی

درس بعدی - ذخیره سازی وب