شرکت طراحی سایت رسارایان

  با 13 سال سابقه کار طراحی و راه اندازی وبسایت های اینترنتی و فروشگاه آنلاین

Drag and Drop در HTML5

Drag and Drop در HTML5

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

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

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

Drag And Drop

Drag and Drop در HTML5

شما با استفاده از این قابلیت میتونید یک 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 ما نیاز به 3 تابع در جاوااسکریپت داریم ، که هر کجا که خواستید میتونید این سه تابع رو فراخوانی کنید و استفاده کنید . (چون جی کوئری استفاده نمیکنیم نیازی به کتابخانه جی کوئری هم نداریم ) این سه تابع به شرح زیر هست :

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

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

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

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

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

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

 تصویری از نتیجه ی کار رو میتونید در زیر مشاهده کنید :

Drag and Drop در HTML5

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

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

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

دریافت فایل

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

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

این مورد را ارزیابی کنید
(0 رای‌ها)
  • آخرین ویرایش در یکشنبه, 25 آبان 1393 ساعت 11:19
  • اندازه قلم
محتوای بیشتر در این بخش: « web storage در html5 رسم دایره در canvas »
برای ارسال نظر وارد سایت شوید

خدمات اینترنتی رسا رایان

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

تلفن تماس: 08644223637    تلفن همراه : 09120942434  -  09188665650   ایمیل: این ایمیل آدرس توسط سیستم ضد اسپم محافظت شده است. شما میباید جاوا اسکریپت خود را فعال نمایید