0

بلاگ

خدمات شبکه فراز نتورک > دانلود رایگان > وب مستر > آموزش HTML & CSS > Drag و Drop در HTML

Drag و Drop در HTML

2021/02/23
ارسال شده توسط
آموزش HTML & CSS
1.24k بازدید
آموزش اچ تی ام ال

Drag و Drop در HTML

آموزش Drag And Drop یا همون بکش و رها کن در HTML

منظور از Drag و Drop چیست؟ اصلا Drag And Drop چیست؟ آموزش Drag و Drop در HTML… چگونه می‌توانیم از  HTML برایAPI  مربوط به Drag و Drop استفاده کنیم؟

  • 1 کار با drag و drop در HTML
  • 2 مثال کشیدن و رها کردن
  • 3 فعال کردن ویژگی کشیدن در عنصر
  • 4 چه چیزی بکشیم – ondragstart و setdata
  • 5 کجا رها کنیم – ondragover
  • 6 انجام رها سازی – ondrop
  • 7 مثال کاربردی :

کار با drag و drop در HTML

کشیدن و رها کردن یا Drag و Drop یکی از رایج ترین ویژگی های کار با کنترل ها است. در این نوع حرکت کاربر ابتدا یک شی را می گیرد و سپس با کشیدن و رها کردن آن در مکان دیگر مکان آن را تغییر می دهد.

در html5، عملکرد کشیدن و رها کردن جزء استاندارد این نسخه است. همه عناصر قابل کشیدن هستند. پس بیاین در جلسه از مجموعه فرازنتورک ، در رابطه با استفاده از  API مربوط به Drag و Drop بیشتر صحبت کنیم.

مثال کشیدن و رها کردن

مثال زیر یک نمونه ساده از کشیدن و رها کردن را نمایش می دهد:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 120px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

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

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the Faraznetwork image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://faraznetwork.com/blog/wp-content/uploads/2018/10/logo-blog-main.png" draggable="true" ondragstart="drag(event)" width="336" height="100">

</body>
</html>

کد های بالا ممکن است پیچیده به نظر بیایند، اما بگذارید تمام رویداد های این عملکرد را با هم بررسی کنیم. برای آشنایی با تگ img که در این کد استفاده شده است، می‌توانید مقاله مربوط به آموزش تصاویر در HTML را بخوانید.

فعال کردن ویژگی کشیدن در عنصر

قبل از هر چیزی باید عنصر مورد نظر را قابل کشیدن کنیم با خاصیت draggable و مقدار true این مسئله حل می شود.

<img draggable="true">

چه چیزی بکشیم – ondragstart و setdata

پس از فعال کردن ویژگی کشیدن، باید تعیین کنیم چه عملی در هنگام کشیدن عنصر انجام شود. در مثال ابتدای مقاله،  خاصیت ondragstart یک تابع را صدا زده می شود(drag) که تعیین می کند چه داده ای باید کشیدن شود.

تابع datatransfer.setdata نوع داده و مقدار داده کشیده شده را تعیین می کند.

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

در این مثال، نوع داده “text” است و مقدار آن شناسه عنصر قابل کشیدن.

کجا رها کنیم – ondragover

در رویداد ondragover، رویداد تعیین می کند کجا داده ها باید رها شوند.

به صورت پیش فرض، داده یا عنصر مورد نظر نمی توانند در سایر عناصر رها شوند. برای دادن اجازه رها سازی برروی سایر عناصر باید مانع اجرای پیش فرض رویداد رها کردن در عنصر مقصد شویم.

این مشکل با فرخوانی event.preventdefault در رویداد ondragover حل می شود:

<em>event</em>.preventDefault()

انجام رها سازی – ondrop

هنگامی که داده ها رها می شوند، یک رویداد رها سازی اجرا می شود.

در مثالی که در بالا آورده بودیم، تابع ondrop یک تابع به نام drop را که در پایین آورده ایم صدا می‌زند.

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

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

دریافت داده های کشیده شده توسط تابع datatransfer.getdata. این تابع هر داده ای که برای تابع setdata تنظیم شده است را با همان نوع داده ای بازگشت می دهد.

داده رویداد کشیده شدن در واقع شناسه عنصر کشیده شده است.

چسباندن عنصر کشیده شده در عنصر رها شده.

تا اینجا در این مقاله با Drag و Drop در HTMLآشنا شدیم.

آشنایی با ذخیره سازی وب در HTML

منظور از web storage در HTML

منظور از web storage در HTML چیست؟ چگونه می‌توانیم از ذخیره سازی وب در HTML استفاده کنیم؟

  • 1 ذخیره سازی تحت وب چیست؟
  • 2 آبجکت ذخیره سازی
  • 3 آبجکت localstorage
  • 4 آبجکت sessionstorage

ذخیره سازی تحت وب چیست؟

توسط این روش، اپلیکیشن های تحت وب می توانند داده های خود را به صورت محلی در مرورگر ذخیره کنند. قبل از html5، اپلیکیشن ها باید داده ها را در کوکی ها و در هر درخواست سرور قرار می دادند.

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

برخلاف کوکی ها، محدودیت ذخیره سازی مبتنی بر وب بسیار بیشتر است(حداقل 5 مگابایت) و اطلاعات هیچ وقت به سرور منتقل نمی شوند.

این روش ذخیره سازی برپایه مبدا است(دامین و پروتکل). همه صفحات از یک مبدا می توانند به داده های یکسان دسترسی داشته باشند.

آبجکت ذخیره سازی

این روش ذخیره سازی دو آبجکت برای ذخیره داده ها برروی کلاینت ارائه می دهد:

  • localstorage – ذخیره داده ها بدون تاریخ انقضاء
  • sessionstorage – ذخیره داده ها برای یک جلسه(session)، داده ها هنگام بسته شدن تب مرورگر از بین می روند.

قبل از استفاده از ذخیره سازی مبتنی بر وب، پشتیبانی مرورگر را برای localstorage و sessionstorage بررسی کنید:

 if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage sup
port..
}

آبجکت localstorage

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

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

ساخت یک جفت کلید/مقدار با نام lastname و مقدار smith

بازگرداندن مقدار کلید lastname و اضافه کردن آن به عنصر با شناسه result

مثال بالا را می توان به شکل زیر بازنویسی کرد:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

روش حذف کلید lastname از localstorage به شکل زیر است:

localStorage.removeItem("lastname");

نکته: به خاطر داشته باشید جفت های کلید/ مقدار همیشه به صورت رشته ای ذخیره می شوند. بنابراین در هنگام استفاده در صورت نیاز آن ها را به فرمت مورد نظر تبدیل کنید.

مثال زیر، تعداد کلیک های کاربر بر روی یک دکمه را حساب می کند و نوع مقدار را از رشته به عدد باز می گرداند تا بتوان در شمارشگر مورد استفاده قرار گیرد.

if (localStorage.clickcount) {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
  localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";

آبجکت sessionstorage

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

مثال زیر تعداد دفعات کلیک کاربر برروی دکمه را حساب و ذخیره می کند.

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

امیدوارم این مقاله از مجموعه آموزش های  HTML براتون مفید بوده باشد.

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده:راحله تبریزی

 

 

 

اشتراک گذاری:
برچسب ها:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید