قابلیت های Drag and Drop و Web Storage در HTML5

          برنامه نویس 
            بازدید : 39
          چهارشنبه 12 تیر 1398
           نظرات (0)
        

Drag and Drop چیست؟

Drag and Drop یکی از قابلیت های رایج در برنامه های کامپیوتری است. در این قابلیت شما چیزی را با موس گرفته (drag) و در جایی می برید و آنجا رها (drop) می کنید. در HTML5 هر عنصری قابل drag شدن است و مشکلی سر راهمان نیست. وضعیت پشتیبانی از این ویژگی در مرورگر های مطرح دنیا به این شرح است:

مرورگر	کروم	فایرفاکس	اپرا	سافاری	اینترنت اکسپلورر یا Edge
نسخه	4.0	3.5	12.0	6.0	9.0

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPEHTML>
<html>
<head>
<style>
#div1 {
  width:350px;
  height:70px;
  padding:10px;
  border:1pxsolid#aaaaaa;
}
</style>
<script>
functionallowDrop(ev){
  ev.preventDefault();
}
 
functiondrag(ev){
  ev.dataTransfer.setData("text",ev.target.id);
}
 
functiondrop(ev){
  ev.preventDefault();
  vardata=ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<pdir='rtl'>لوگویروکسوراگرفته(drag)وآنراداخلمستطیلبالاپایینرها(drop)کنید.</p>
 
<div id="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div>
<br>
<img id="drag1"src="https://www.roxo.ir/wp-content/uploads/2019/03/roxo-plus-new.png"draggable="true"ondragstart="drag(event)"width="236"height="79">
 
</body>
</html>

مشاهده ی خروجی در JSBin

شاید در نگاه اول برایتان عجیب و سخت باشد اما اینطور نیست. بگذارید آن را بررسی کنیم.

اولین قدم ما این است که تصویر را draggable (قابلیت Drag و کشیده شدن) کنیم. برای این کار از خصوصیتdraggable استفاده می کنیم:

 
1

<img draggable="true">

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

 
1
2
3

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

در اینجا نوع داده text (یعنی متن) و مقدار هم id مربوط به عنصر drag شده است (drag1).

سپس رویداد ondragover مشخص می کند که محتوای drag شده در چه قسمتی می تواند drop شود. در حالت پیش فرض عناصر نمی توانند روی عناصر دیگر drop شوند بنابراین باید حالت پیش فرض را از بین ببریم. این کار را با استفاده از دستور ()event.preventDefault انجام می دهیم.

پس از اینکه عنصر مورد نظر drop شد، رویداد خاصی اجرا می شود. در مثال بالا attribute ای به نام ondrop تابعی به نام (drop(event را صدا می زند:

 



1
2
3
4
5

functiondrop(ev){
  ev.preventDefault();
  vardata=ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

توضیح این کد بدین صورت است: ابتدا ()preventDefault رفتار پیش فرض مرورگر را از بین می برد (در حالت پیش فرض این است که در زمان drop و رها سازی عنصر آن را به عنوان یک لینک باز کند). سپس عنصر drag شده را با استفاده از متد ()dataTransfer.getData می گیریم؛ این متد هر عنصری را برمیگرداند که در ()setData دارای type (نوع) یکسانی باشد. داده ی drag همان id مربوط به عنصر drag شده است (در مثال ما همان drag1). در آخر عنصر drag شده را به عنصر drop شده متصل می کنیم.

برای روشن تر شدن موضوع همین فرآیند را در قالب چند مثال دیگر مینویسیم:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!DOCTYPEHTML>
<html>
<head>
<style>
#div1, #div2 {
  float:left;
  width:100px;
  height:35px;
  margin:10px;
  padding:10px;
  border:1pxsolidblack;
}
</style>
<script>
functionallowDrop(ev){
  ev.preventDefault();
}
 
functiondrag(ev){
  ev.dataTransfer.setData("text",ev.target.id);
}
 
functiondrop(ev){
  ev.preventDefault();
  vardata=ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<h2>Drag andDrop</h2>
<pdir='rtl'>لوگویروکسورابیندومستطیلdragوdropکنید.</p>
 
<div id="div1"ondrop="drop(event)"ondragover="allowDrop(event)">
  <img src="https://www.roxo.ir/wp-content/uploads/2019/03/roxo-plus-new.png"draggable="true"ondragstart="drag(event)"id="drag1"width="88"height="31">
</div>
 
<div id="div2"ondrop="drop(event)"ondragover="allowDrop(event)"></div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

Web Storage چیست؟

با استفاده از Web Storage ها، وب سایت ها و برنامه های وب می توانند داده هایی را به صورت محلی در مرورگر کاربر ذخیره کنند. قبل از معرفی HTML5 تمامی این داده ها (حتی تمامی درخواست های سرور و ….) می بایست در کوکی ها ذخیره می شد اما Web storage ها امن تر هستند و می توان از طریق آن ها حجم بالایی از داده را در مرورگر کاربر ذخیره کرد بدون آنکه وب سایت مان را کند کنیم. بر خلاف کوکی ها که حداکثر سایزشان می تواند 4096 بایت (نه کیلو بایت) باشد، Web Storage ها می توانند مقدار بسیار بیشتری را در خود ذخیره کنند (حداقل 5 مگابایت) و اطلاعات نیز هیچ وقت به سرور منتقل نمی شوند. همچنین Web Storage ها بر اساس منبع عمل می کنند؛ یعنی تمام صفحات وبی که از یک منبع (یک دامنه یا پروتکل) باشند می توانند داده ها را ذخیره کرده و همگی به همان داده دسترسی داشته باشند.

پشتیبانی از Web Storage ها به شرح زیر است:

مرورگر	کروم	فایرفاکس	اپرا	سافاری	اینترنت اکسپلورر یا Edge
نسخه	4.0	3.5	11.5	4.0	8.0

HTML دو شیء برای ذخیره ی داده ها در web storage به ما می دهد:

window.localStorage : داده ها را بدون زمان انقضاء ذخیره کنید.
window.sessionStorage : داده ها را برای یک نشست (session) ذخیره می کند و زمانی که پنجره یا tab مرورگر بسته شود داده ها نیز از بین می روند.

قبل از اینکه از web storage استفاده کنید با استفاده از کد زیر از پشتیبانی مرورگرتان از localStorage و sessionStorage مطمئن شوید:

 



1
2
3
4
5

if(typeof(Storage)!=="undefined"){
  // کد برای ذخیره سازی داده ها
}else{
  // متاسفانه مرورگر شما از web storage پشتیبانی نمی کند.
}

شیء localStorage

این شیء داده ها را بدون تاریخ انقضاء ذخیره می کند بنابراین زمانی که مرورگر بسته شود داده ها حذف نمی شوند و تا روز بعد، ماه بعد، سال بعد و … در دسترس خواهند بود. مثال:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<body>
 
<div id="result"></div>
 
<script>
// Check browser support
if(typeof(Storage)!=="undefined"){
  // Store
  localStorage.setItem("lastname","Smith");
  // Retrieve
  document.getElementById("result".innerHTML=localStorage.getItem("lastname");
}else{
  document.getElementById("result").innerHTML="متاسفانه مرورگر شما از Web Storage پشتیبانی نمی کند.";
}
</script>
 
</body>
</html>

مشاهده ی خروجی در JSBin

در مثال بالا ابتدا یک جفت name/value به صورت "name="lastname و "value="Smith ساخته ایم. سپس مقدار lastname را گرفته و آن را داخل عنصری قرار داده ایم که id اش برابر با "id="result باشد. ما می توانستیم مثال بالا را به این شکل نیز بنویسیم:

 



1
2
3
4

// ذخیره سازی
localStorage.lastname="Smith";
// دریافت
document.getElementById("result").innerHTML=localStorage.lastname;

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

 
1

localStorage.removeItem("lastname");

نکته: جفت های Name/value همیشه به عنوان رشته (String) ذخیره می شوند. اگر در فرمت دیگری به آن ها احتیاج دارید یادتان باشد که باید آن ها را تبدیل فرمت کنید؛ مثال زیر تعداد دفعاتی که کاربری روی دکمه ای کلیک کرده را می شمارد بنابراین باید رشته را تبدیل به عدد کنیم تا بتوانیم هر واحد را به صورت ریاضی به آن اضافه کنیم:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPEhtml>
<html>
<head>
<script>
functionclickCounter(){
  if(typeof(Storage)!=="undefined"){
    if(localStorage.clickcount){
      localStorage.clickcount=Number(localStorage.clickcount)+1;
    }else{
      localStorage.clickcount=1;
    }
    document.getElementById("result").innerHTML="شما "+localStorage.clickcount+" بار روی دکمه کلیک کرده اید";
  }else{
    document.getElementById("result").innerHTML="متاسفانه مرورگر شما از web storage پشتیبانی نمی کند.";
  }
}
</script>
</head>
<body>
 
<p><button onclick="clickCounter()"type="button">اینجاراکلیککنید</button></p>
<div id="result"></div>
<pdir='rtl'>رویدکمهیبالاکلیککنیدتااضافهشدنشمارندهراببینید.</p>
<pdir='rtl'>مرورگرخودیاtabفعلیراببندیدودوبارهبهاینصفحهبیایید.خواهیددیدکهشمارندهازصفرشروعنمیشودبلکهذخیرهشدهاست.</p>
 
</body>
</html>

مشاهده ی خروجی در JSBin

شیء sessionStorage

این شیء شبیه شیء localStorage است و تنها تفاوتشان این است که sessionStorage داده ها را تنها برای یک نشست (session) تعیین می کند و زمانی که کاربر پنجره ی مرورگر خود را ببندد داده ها هم از بین می روند. مثال زیر همان مثال بالا است اما با استفاده از sessionStorage ها نوشته شده است:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPEhtml>
<html>
<head>
<script>
functionclickCounter(){
  if(typeof(Storage)!=="undefined"){
    if(sessionStorage.clickcount){
      sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
    }else{
      sessionStorage.clickcount=1;
    }
    document.getElementById("result").innerHTML="شما "+sessionStorage.clickcount+" بار روی دکمه کلیک کرده اید";
  }else{
    document.getElementById("result").innerHTML="متاسفانه مرورگر شما از web storage پشتیبانی نمی کند.";
  }
}
</script>
</head>
<body>
 
<p><button onclick="clickCounter()"type="button">اینجاراکلیککنید</button></p>
<div id="result"></div>
<pdir='rtl'>رویدکمهیبالاکلیککنیدتااضافهشدنشمارندهراببینید.</p>
<pdir='rtl'>مرورگرخودیاtabفعلیراببندیدودوبارهبهاینصفحهبیایید.خواهیددیدکهشمارندهازصفرشروعمیشودودادههاازبینمیروند.</p>
 
 
</body>
</html>

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید.

منبع: روکسو

ارسال نظر برای این مطلب