سبد (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> جابه جا کنیم.

دیدگاه‌ها  

+1 # Guest 1396-07-10 10:05
سلام
ببخشید این توابعی که استفاده شده در مثال مربوط به جاوااسکریپته؟
یه سوال دیگه الان من html و css رو خوندم الان برم سراغ html5 و css3 یا برم سراغ جاوا اسکریپت؟فعلا که رفتم سراغ html5 ولی کداشو متوجه نمیشم پر از تابغ است!
لطفا پاسخ بدین ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-07-10 14:01
سلام، بله در مطلب بالا برای جابجایی عناصر از جاواسکریپت استفاده شده است. اما جای نگرانی نیست شما در آینده بعد از آموزش HTML , HTML5 و CSS و CSS3 باید با جاوااسکریپت آشنا شوید. بنابراین در همین حد که برای جابجایی عناصر مجبور به استفاده از جاواسکریپت هستیم را از ما بپذیرید و در آینده که با مبحث مذکور کاملا آشنا شدید، برگردید و مطلب بالا رو یکبار دیگر مطالعه فرمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # خانم حسینی 1396-02-21 13:43
ایا میشه در جیکوئری عکس هارو در صفحه جابه جا کرد؟یعنی از محلی کلیک کرده و با کشیدن ان به محلی دیگر انتقال دهیم ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-02-23 08:32
در مطلب بالا، به آموزش همین موضوع پرداخته ایم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # محمد82 1394-09-15 00:59
با سلام
آموزش جابه جا کردن عناصر در HTML5 عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # daneshjo 1394-03-01 18:28
سلام
چطور با استفاده از دکمه در صفحه اسکرول کنیم و به بالا و پایین برویم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-03-03 22:43
متد ()scrollTo، صفحه را به یک مختصات مشخص اسکرول می کند.
برای کسب اطلاعات بیشتر به لینک زیر مراجعه نمایید:
www.beyamooz.com/jsref/2974-%D9%85%D8%AA%D8%AF-scrollto
از scrollby نیز می توانید استفاده کنید:
www.beyamooz.com/jsref/2973-%D9%85%D8%AA%D8%AF-scrollby
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # خانم مهندس جابر زاده 1392-09-20 21:10
آموزش خوبی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی