جابه جا کردن عناصر در 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));
}

توضیح کد:

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

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

html   فیلم آموزش html  
نوشته شده توسط امیر پهلوان صادق
بازدید: 28990