جابه جا یی عناصر

جابه جا یی عناصر

یکی از قابلیت های هیجان انگیز و جالب HTML 5 ، این است که شما می توانید کاری کنید عنصر مورد نظرتان در صفحه وب ، قابل جابه جا شدن باشد . به عبارت دیگر کاربر بتواند آن را از نقطه ای به نقطه دیگر drag & drop کند .

قبل به وجود آمدن HTML5 ما برای استفاده از ویژگی Drag and Drop حتما لازم بود از کتابخانه هایی مثل jQuery یا MooTools استفاده کنیم. حالا با استفاده از HTML5 ما میتوانیم ویژگی های Drag and Drop را پیاده سازی کنیم.

برای اینکه به یک عنصر این قابلیت را اضافه کنیم باید ویژگی draggable=true را به آن بدهیم. این ویژگی API های دیگری هم دارد که عبارتند از dragstart, drag, dragend, dragenter, dragleave, dragover و drop که از اینها هم میتوانیم استفاده کنیم.

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

جابه جا یی عناصر جابه جا یی عناصر جابه جا یی عناصر drag drop

جابه جا یی عناصر

کد لازم برای dargable ( قابل جابه جا بودن ) یک عکس و سپس انتقال آن در جدول زیر به شما نمایش داده شده است . به کد دقت کنید:

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

این قابلیت در مرورگرهای Explorer 9+, Firefox, Opera, Chrome, Safari پشتیبانی میشه . اما در Safari 5.1.2 پشتیبانی نمیشه .

حالا بیاید باهم یک drag and drop ساده ایجاد کنیم .

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

در مرحله اول باید کاری کنید تا عنصر مورد نظرتان برای drag & drop کردن ، قابل جا به جا شدن باشد .
برای این منظور بایر مقدار خاصیت drggable آن را بر روی مقدار true تنظیم نمایید .

 چون قراره از جاواساکریپت استفاده کنیم ، پس باید این عنصر یه جوری توسط جاوا اسکریپت شناسایی بشه ، پس یه id هم براش میذاریم ، قابل ذکر هست که این id باید با drag شروع بشه و هر تعداد که هست شماره گذاری بشه و جلو بره . مثلا drag1 , drag2 , drag3  و … .

 خوب حالا میخوایم یه باکس هم قرار بدیم که که این تصویر رو بگیریم ، بکشیم و در اون باکس رها کنیم . پس یک div هم به کدمون اضافه میکنیم ، چون باید این div توسط جاوااسکریپت شناسایی بشه پس باید دارای id باشه . مقدار id این باکس هم با div شروع میشه و به ترتیب شماره گذاری میشه : div1 , div2 , div3

 خوب برای drag and drop ما نیاز به ۳ تابع در جاوااسکریپت داریم ، که هر کجا که خواستید میتونید این سه تابع رو فراخوانی کنید و استفاده کنید . (چون جی کوئری استفاده نمیکنیم نیازی به کتابخانه جی کوئری هم نداریم ) این سه تابع به شرح زیر هست :

 

تابع  allowDrop : هر کجا که این تابع رو صدا بزنید ، نشان دهنده ی این هست که اون ناحیه قابلیت این رو داره که اشیاء رو در خودش نگه داره ، به عبارتی در اون ناحیه اشیاء مجاز به فرود هستند و شما میتونید فقط تو اون ناحیه اشیاء رو drop کنید . به طور کلی برای نواحی که قراره عمل DROP روشون انجام بشه ، این رویداد رو صدا میزنیم .

تابع drag : عمل کشیدن object یا شیء رو روی صفحه امکان پذیر میکنه .

تابع drop : عمل رها کردن شیء رو امکان پذیر میکنه .

هر کجا که بخواین فقط کافیه این سه تابع رو استفاده کنید .

خوب حالا باید به تصویرمون خاصیت ondragstart رو بدیم تا رویداد drag رو بتونیم رو تصویر اعمال کنیم ، یعنی بتونیم تصویر رو با موس روی صفحه بکشیم ، با این خاصیت ما هرگاه که تصویر رو بکشیم تابع drag جاوااسکریپت اجرا میشه  :

 حالا باید به باکسمون رویداد ondrop رو بدیم تا بتونیم رویداد drop رو در باکس اعمال کنیم و در نهایت باید خاصیت ondragover رو لحاظ کنیم تا بتونیم تابع allowDrop رو صدا بزنیم و بگیم که فقط تو این ناحیه drop مجاز هست  :

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

پس به صورت خلاصه خواهیم داشت:

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

در مرحله اول باید کاری کنید تا عنصر مورد نظرتان برای drag & drop کردن ، قابل جا به جا شدن باشد .
برای این منظور بایر مقدار خاصیت drggable آن را بر روی مقدار true تنظیم نمایید .

کد لازم < img draggable = ” true ” />

 


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

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

کد لازم function drag ( ev )
{
ev.dataTransfer.setData ( ” Text ” , ev.target.id ) ;
}

در کد بالا ، خاصیت ondragstart عنصر عکس تگ ( < img > ) ، رویداد ( drag ( event را فراخوانی می کند . این رویداد تعیین می کند چه عنصری می خواهد drag شود . این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید .
متد ( ) dataTransfer.setData اطلاعات عنصری که قرار است darg شود ، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد . این id از نوع ” text ” بوده و مقدار آن در این مثال drag1 است .


مرحله سوم – عنصر darg شده در کجا drop شود ؟ :

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

کد لازم     function drop(ev)
      {
        var data = ev.dataTransfer.getData( ” Text ” ) ;
        ev.target.appendChild ( document.getElementById ( data ) );
        ev.preventDefault( );
      }

هنگامی که عکس را در مکان تعیین شده رها می کنید ، رویداد ondrop تگ < div > رخ داده و تابع drop را فراخوانی می کند ..تابع drop توسط متد ( ) ev.dataTransfer.getData ، شناسه یا همان id عنصر drag شده را دریافت کرده و با متد  ev.target.appendChild  آن را به تگ div مرتبط می سازد .

 

آموزش HTML آموزش طراحی وب

دسته بندی و برچسب

دیدگاه خود را بیان کنید