سبد (0)

جابه جا کردن عناصر در HTML5

کشیدن (Drag) و انداختن (Drop) عناصر، بخشی از استاندارد html5 است.

کشیدن (Drag) و انداختن (Drop)

کشیدن و انداختن عناصر یکی از ویژگی های خیلی معمول HTML5 است. منظور از کشیدن و انداختن زمانی است که یکی از اشیاء داخل صفحه را بگیرید و به محلی دیگر بکشید و رها نمایید.

در HTML5 هر عنصری در صفحه می تواند قابل کشیدن (draggable) باشد.

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari جابه جا کردن عناصر را پشتیبانی می کنند.

توجه: Safari 5.1.2 و نسخه های قدیمی تر آن، جابه جا کردن عناصر را پشتیبانی نمی کنند.

مثال کشیدن و انداختن عناصر در HTML5

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

مثال (جابه جا کردن عناصر در HTML5)

<!DOCTYPE HTML>
<html>
<head>
<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>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>

<img id="drag1" src="/img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>
خودتان امتحان کنید »

مثال بالا ممکن است کمی پیچیده بنظر برسد، اما اجازه بدهید بعد از مرور تمام بخش های آن در پایین قضاوت نمایید.

عنصر مورد نظر را قابل جا به جا کردن کنید 

در مرحله اول باید کاری کنید تا عنصر مورد نظرتان، قابل جا به جا شدن باشد.

برای این منظور باید خاصیت drggable را با مقدار true تنظیم نمایید:

<img draggable="true">

تعیین عنصری که می خواهید جا به جا شود

در مرحله دوم باید عنصری را که می خواهید جا به جا شود و همچنین اتفاقی که پس از کشیدن آن قرار است بیافتد را تعیین نمایید.

در کد بالا، خاصیت ondragstart عنصر <img>، را با رویداد (drag(event تنظیم کرده ایم. این رویداد تعیین می کند چه عنصری می خواهد جابه جا شود. این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید.

متد ()dataTransfer.setData اطلاعات عنصری که قرار است کشیده شود، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد. این id از نوع "Text" بوده و مقدار آن در این مثال drag1 است.

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

عنصر جابه جا شده را کجا می توان رها نمود

رویداد ondragover مشخص کننده محلی است که داده ی جابه جا شده را می توان رها نمود.

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

این کار هنگامی که رویداد ondragover اتفاق می افتد، با صدا زدن متد ()ev.preventDefault انجام می شود:

function allowDrop(ev)
{
ev.preventDefault();
}

رها کردن عنصر جابه جا شده

پس از انتخاب عنصر و جابه جا کردن آن، باید مکانی که فرود (drop) می آید را تعیین کرده و سپس آنرا رها نمایید.

در مثال بالا، هنگامی که عکس را در مکان تعیین شده رها می کنید، رویداد ondrop تگ <div> رخ داده و تابع drop را فراخوانی می کند.

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

توضیح کد:

  • بصورت پیشفرض، عناصر و داده ها را نمی توان جابه جا نمود. بنابراین با صدا زدن متد ()ev.preventDefault از این کار جلوگیری می کنیم.
  • توسط متد ()ev.dataTransfer.getData، شناسه یا همان id عنصر drag شده را دریافت می کنیم. این متد شناسه همان نوع داده ای را که در متد ()setData تنظیم کردید، برمی گرداند.
  • این id از نوع "Text" بوده و مقدار آن در این مثال drag1 است.
  • متد ()ev.target.appendChild عنصر انتخاب شده را به تگ div مرتبط می سازد.

مثال - خودتان امتحان کنید

 جابه جا کرد عکس بین دو محل
در این مثال، نشان داده شده است که چگونه یک عکس را بین دو عنصر <div> جابه جا کنیم.

نوشته شده توسط امیر پهلوان صادق
بازدید: 30035

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

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه