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

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 تنها یک زبان برنامه نویسی تحت سرور است که میتونید نرم افزارهای تحت وب رو با این زبان بنویسید اما برای ایجاد افکت ها ، یا استفاده از قابلیت هایی شبیه به Drag And Drop ، ایجکس و … باید از ترکیب html5 , css3 , jquery استفاده کنید . شما میتونید در کد html یی که نوشتید php به کار ببرید و این کد رو داینامیک کنید .
      موفق باشید

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

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

پنل کاربران

بستن
*
*

نظرسنجی

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

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

اموزش تصادفی

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

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

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

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