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

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

دسته بندی موضوعات
سفارش تبلیغات

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 رو اجرا کنید تا نتیجه رو بصورت زنده ببینید 🙂 و لذت ببرید .

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

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

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • امیررضا ناظمی

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

    • میترا رحیمی

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

  • ابوالفضل

    با تشکر از همه عزیزان و به خصوص خانم میترا رحیمی

    واقعا آموزش خوبی بود
    کلا سایت خوبیه!!

    • میترا رحیمی

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟