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

Drag and Drop در HTML5

در این جلسه ی آموزشی Drag and Drop در HTML5 رو به شما دوستان آموزش میدیم .

Drag and Drop در HTML5

فصل چهارم ( معرفی HTML5 )

جلسه یازدهم  (  Drag and Drop در HTML5 )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

در این جلسه ، قصد دارم Drag And Drop در HTML5 رو بهتون آموزش بدم. برعکس اسمش پیاده سازی این کار بسیار سادست ، در این جلسه باهم یک Drag And Drop پیاده سازی میکنیم . فقط کافیه کمی دقت کنید 🙂

Drag And Drop

DragDrop

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

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

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

 اول یک تصویر میذاریم و قابلیت drag رو بهش میدیم draggable=”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 and drop

خوب تموم شد 🙂  تمامی کدها بصورت کامل در قالب یک فایل html در فایل ضمیمه قرار داده شد ؛ شما میتونید با استفاده از آموزشی که دادیم این عمل رو انجام بدید کافیه فایل ضمیمه رو دانلود کنید ، index رو اجرا کنید تا نتیجه رو بصورت زنده ببینید 🙂 و لذت ببرید .

شما میتونید هر استایلی که میخواین به کدها بدید و هرگونه که موردنظرتون هست اون رو پیاده سازی کنید .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۴

  • این آموزش خیلی خوب بود ولی می خواستم بدونم که می شه این کدرا در PHP هم استفاده کرد یا اصلا PHP قابلیت این کار را به تنهایی داره یا نه.

    • سلام
      بله دوست عزیز میتونید در کنار php هم از این قابلیت استفاده کنید . php تنها یک زبان برنامه نویسی تحت سرور است که میتونید نرم افزارهای تحت وب رو با این زبان بنویسید اما برای ایجاد افکت ها ، یا استفاده از قابلیت هایی شبیه به Drag And Drop ، ایجکس و … باید از ترکیب html5 , css3 , jquery استفاده کنید . شما میتونید در کد html یی که نوشتید php به کار ببرید و این کد رو داینامیک کنید .
      موفق باشید

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

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین