برای کتابخانه VCL، Borland نسخه خود را از رابط Drag&Drop (که به عنوان "کشیدن" ترجمه شده است) پیاده سازی کرده است. این رابط داخلی است - شما می توانید هر کنترل دلفی را در داخل فرم ارسال و دریافت کنید (به جز خود فرم). بدون استفاده از توابع API مربوطه ویندوز پیاده سازی می شود - آنها باید هنگام سازماندهی ارتباط با سایر وظایف با کشیدن و رها کردن استفاده شوند. .

کلیک کردن دکمه سمت چپماوس را روی کنترل، می‌توانیم آن را به هر عنصر دیگری "کشش" کنیم. از دیدگاه برنامه نویس، این بدان معنی است که در لحظه های کشیدن و رها کردن کلید، رویدادهای خاصی تولید می شوند که تمام اطلاعات لازم را منتقل می کنند - یک اشاره گر به شیء کشیده شده، مختصات مکان نما فعلی و غیره. گیرنده رویداد عنصر است. که روی آن این لحظهمکان نما قرار دارد. کنترل کننده چنین رویدادی باید به سیستم بگوید که آیا کنترل داده شده "ارسال" را می پذیرد یا خیر. هنگامی که دکمه روی کنترل گیرنده رها می شود، بسته به آمادگی گیرنده، یک یا دو رویداد دیگر اجرا می شود.

لغو بکشید عملیات جاری کشیدن و رها کردن یا کشیدن و اتصال را لغو می کند.

تابع FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean): TControl ;

تابع یک شی از کلاس پایه را برمی گرداند TCکنترل ، که به موقعیت صفحه با مختصات مشخص شده توسط پارامتر Pos اشاره دارد. این تابع برای تعیین گیرنده احتمالی عملیات کشیدن و رها کردن یا کشیدن و داک کردن استفاده می شود. اگر هیچ کنترل پنجره ای برای موقعیت مشخص شده وجود نداشته باشد، تابع برمی گرددصفر . پارامتر AllowDisabled تعیین می کند که آیا اشیاء غیرفعال در نظر گرفته می شوند یا خیر.

تابع IsDragObject(فرستنده: TObject): Boolean;

تابع تعیین می کند که آیا شی مشخص شده در پارامتر Sender از نوادگان کلاس است یا خیر TDragObject . این تابعمی تواند به عنوان پارامتر Source در کنترل کننده رویداد OnDragOver و OnDockOver برای تعیین اینکه آیا شیء کشیده شده پذیرفته می شود یا خیر استفاده شود. همچنین عملکرد IsDragObjectمی تواند به عنوان پارامتر Source در کنترل کننده رویداد OnDragDrop و OnDockDrop به منظور تفسیر صحیح شیء کشیده شده استفاده شود.

DragMode، ویژگی‌های DragCursor، BeginDrag، OnDragOver، OnDragDrop، OnEndDrag، روش‌های OnStartDrag، پارامتر Accept

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

تمام خصوصیات، متدها و رویدادهای مرتبط با فرآیند کشیدن و رها کردن در کلاس TControl تعریف شده‌اند که والد تمام اجزای بصری دلفی است. بنابراین، آنها در همه اجزاء مشترک هستند.

شروع کشیدن توسط ویژگی DragMode تعیین می شود که می تواند در زمان طراحی یا از نظر برنامه ای برابر با dmManual یا dmAutomatic تنظیم شود. مقدار dmAutomatic (اتوماتیک) شروع خودکار فرآیند کشیدن را زمانی که کاربر دکمه ماوس را روی کامپوننت کلیک می کند، تعیین می کند. با این حال، در این مورد، رویداد OnMouseDown مربوط به فشار دادن دکمه ماوس توسط کاربر به هیچ وجه برای این مؤلفه رخ نمی دهد.

رابط برای انتقال و دریافت مولفه ها مدت ها پیش ظاهر شد. این تعامل بین دو کنترل را در طول اجرای برنامه فراهم می کند. در این صورت می توان هرگونه عملیات لازم را انجام داد. با وجود سادگی اجرا و قدمت توسعه، بسیاری از برنامه نویسان (به ویژه مبتدیان) این مکانیسم را مبهم و عجیب می دانند. با این حال، استفاده از Drag-and-Drop می تواند بسیار مفید و آسان برای پیاده سازی باشد. اکنون ما این را تأیید می کنیم.

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

باور کنید، تبدیل شدن به آن به اندازه کافی آسان است مختصات X,Y، در پارامترهای رویدادهای OnDragOver و OnDragDrop به مختصات فرم منتقل می شود.

با ویژگی های Left و Top مؤلفه ای که مکان نما روی آن قرار دارد کار کنید. من یک مثال ساده می زنم. یک جزء یادداشت را روی فرم قرار دهید و اختصاص دهید تراز کردن ویژگیمقدار alTop یک پانل روی فرم قرار دهید، همچنین ویژگی Align را روی alTop قرار دهید و ویژگی Height را روی یک مقدار کوچک مثلاً 6 یا 7 پیکسل قرار دهید. DragMode را روی dmAutomatica و DragCursor را روی crVSplit قرار دهید. کامپوننت Memo دیگری را قرار دهید و Align را روی alClient قرار دهید. هر دو یادداشت را همزمان انتخاب کنید، پانل، و یک کنترل کننده رویداد مشترک OnDragOver را مطابق شکل زیر ایجاد کنید:

ویژگی Drag and Drop می تواند به افزایش عملکرد iPad شما کمک کند. در اینجا نحوه استفاده از آن آورده شده است.

بنابراین می توانید یک فایل را از یک سرویس ذخیره سازی ابری به سرویس دیگر منتقل کنید، متن را از Safari در یک برنامه ویرایش متن کپی کنید تا یک نقل قول اضافه کنید یا ایجاد کنید. پشتیبان گیریعکس های خاص در برنامه ذخیره سازی فایل

نحوه کشیدن و رها کردن عکس ها، فایل ها و متن

1. عکس، فایل یا متن برجسته‌شده‌ای را که می‌خواهید به برنامه دیگری بکشید، لمس کنید و نگه دارید.

2. مورد را به آن بکشید جای مناسبکه در این نرم افزاریا دیگری که در Slide Over یا Split View باز کرده اید و رها کنید.

چگونه چندین عکس یا فایل را همزمان بکشید و رها کنید

1. یکی از عکس‌ها یا فایل‌هایی را که می‌خواهید بکشید، لمس کنید و نگه دارید.

2. در حین کشیدن مورد فعلی، روی عکس یا فایل دیگری که می‌خواهید آن را نیز بکشید ضربه بزنید. این کار را دوباره با هر تعداد عنصری که می خواهید حرکت دهید، انجام دهید.

3. همه اشیاء انتخاب شده را به مکان تعیین شده در برنامه دیگری که در Slide Over یا Split View باز کرده اید بکشید و آنها را رها کنید.

نحوه کشیدن متن از یک برنامه به برنامه دیگر

1. روی بخشی از متنی که می خواهید بکشید ضربه بزنید و نگه دارید تا انتخاب شود.

2. از نقاط انتخاب برای برجسته کردن بقیه متنی که می خواهید بکشید استفاده کنید.

3. متن انتخاب شده را فشار داده و نگه دارید.

4. متن را به برنامه ای که می خواهید در آن قرار دهید بکشید و رها کنید.

نحوه تغییر موقعیت نمادهای چندین برنامه به طور همزمان با استفاده از "Drag and Drop"

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

1. نماد برنامه ای را که می خواهید در صفحه اصلی تغییر مکان دهید، لمس کنید و نگه دارید.

2. دست زدن به برنامه های کاربردی اضافی، که باید جابجا شود.

3. این برنامه ها را به صفحه یا پوشه ای که می خواهید در آن قرار گیرند بکشید و رها کنید.

مدت‌هاست که توابع جاوا اسکریپت وجود دارد که به ما امکان ایجاد رابط‌های کشیدن و رها کردن را می‌دهد. اما هیچ یک از این پیاده سازی ها بومی مرورگر نیستند.HTML5 روش خاص خود را برای ایجاد رابط های کشیدن و رها کردن (با کمک کمی از جاوا اسکریپت) دارد. در این مقاله به شما خواهیم گفت که چگونه می توان به این ...

پشتیبانی از مرورگر

کشیدن و رها کردن HTML5 در حال حاضر توسط همه مرورگرهای اصلی دسکتاپ (از جمله IE (حتی IE 5.5 پشتیبانی جزئی دارد) پشتیبانی می شود، اما توسط هیچ یک از مرورگرهای محبوب موبایل پشتیبانی نمی شود.

کشیدن و رها کردن رویدادها

در هر مرحله از کشیدن و رها کردن، رویدادهای مختلفی فعال می‌شوند تا مرورگر بداند کدام کد جاوا اسکریپت را باید اجرا کند. لیست رویدادها:

• dragStart: زمانی فعال می شود که کاربر شروع به کشیدن عناصر می کند.
• dragEnter: زمانی که عنصر کشیده شده برای اولین بار روی عنصر هدف کشیده می شود، اجرا می شود.
• dragOver: هنگامی که ماوس روی یک عنصر حرکت می کند در حالی که کشیدن در حال انجام است، اجرا می شود.
• dragLeave: اگر مکان نما کاربر هنگام کشیدن عنصر را ترک کند، فعال می شود.
• کشیدن: هر بار که ماوس را حرکت می‌دهیم در حالی که عنصر خود را می‌کشیم، شلیک می‌شود.
• drop: هنگامی که دراپ واقعی اجرا می شود، شلیک می شود.
• dragEnd: زمانی که کاربر دکمه ماوس را در حین کشیدن یک شی رها می کند، فعال می شود.

با همه این شنوندگان رویداد، شما کنترل زیادی بر نحوه عملکرد رابط دارید.

شی انتقال داده

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

• dataTransfer.effectAllowed=value: انواع اعمال مجاز را برمی گرداند، مقادیر ممکن: هیچکدام، کپی، copyLink، copyMove، پیوند، انتقال، انتقال، همه و بدون مقدار اولیه.
• dataTransfer.setData (فرمت، داده): داده ها و قالب خاصی را اضافه می کند.
• dataTransfer.clearData(format): تمام داده ها را برای یک فرمت خاص پاک می کند.
• dataTransfer.setDragImage(عنصر، x، y): تصویری را که می خواهید بکشید تنظیم می کند، مقادیر x و y نشان می دهد مکان نما ماوس کجا باید باشد (0، 0 آن را در سمت چپ بالا قرار می دهد).
• data = dataTransfer.getData(format): همانطور که از نام آن پیداست، داده ها را برای یک فرمت خاص برمی گرداند.

ایجاد یک مثال کشیدن و رها کردن

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

کشیدن یک شی

اولین کاری که باید انجام دهیم ایجاد HTML است. ما div ها را با ویژگی draggable قابل کشیدن می کنیم:

پس از انجام این کار، باید یک تابع جاوا اسکریپت تعریف کنیم که به محض شروع حرکت این عنصر فعال می شود:

تابع dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text"، ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ؛ بازگشت واقعی؛ )

در این کد ابتدا اعلام می کنیم که چه نوع افکتی را در عملیات مجاز می کنیم و آن را روی حرکت قرار می دهیم. در خط دوم، داده ها را برای کار با آن تنظیم می کنیم، که متن آن Text و مقدار، شناسه عنصری است که در حال کشیدن آن هستیم. بعد از آن از متد setDragImage استفاده می کنیم که مشخص می کند چه چیزی را بکشیم و سپس مکان نما در حین کشیدن کجا باشد و چون مکعب ها 200 در 200 پیکسل هستند آن را در مرکز قرار می دهیم. در پایان، ما به بازگشت true برمی گردیم.

رها کردن شی

برای اینکه یک عنصر یک drop را بپذیرد، باید به 3 رویداد مختلف گوش دهد: dragEnter، dragOver، و رویداد drop. پس بیایید این را با شناسه بزرگ به div HTML5 خود اضافه کنیم:

تابع dragEnter(ev) ( ev.preventDefault(); return true؛ ) تابع dragOver(ev) (ev.preventDefault(); )

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

در قسمت بعدی، تابعی را برای زمانی که یک عنصر روی هدف مورد نظر "پرتاب می شود" تعریف می کنیم:

تابع dragDrop(ev) ( var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false;)

در این بخش آخر، ابتدا متغیر داده را در جایی قرار می دهیم که تمام داده هایی را که در دسترس است به دست آوریم قالب متن، و سپس داده ها را به div که می خواهیم عنصر را رها کنیم اضافه می کنیم.

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

دمو نشان می دهد که دو div را می توان به جای خود بازگرداند. خوشبختانه، اضافه کردن یک هدف دیگر بسیار ساده تر از آن چیزی است که فکر می کنید. زیرا ما قبلاً این توابع را داریم و تنها کاری که باید انجام دهیم این است که شنوندگان رویداد را اضافه کنیم:

و این تمام چیزی است که لازم است تا بتوان دیو را به جای خود بازگرداند.

بسیاری از برنامه های کاربردی کشیدن و رها کردن وجود دارد که با آن ساخته شده اند با استفاده از جاوا اسکریپتکتابخانه ها و اغلب استفاده از آنها آسان تر است. اما امیدواریم که در این HTML5 و تکنیک جاوا اسکریپت، پتانسیل آینده را برای حل مشکلات خود خواهید دید.

HTML بکشید و رها کنیدرابط‌ها برنامه‌ها را قادر می‌سازند از ویژگی‌های کشیدن و رها کردن در مرورگرها استفاده کنند.کاربر ممکن است انتخاب کند قابل کشیدنعناصر را با ماوس، آن عناصر را به a بکشید قابل رها شدنعنصر، و با رها کردن دکمه ماوس آنها را رها کنید. یک نمایش شفاف از قابل کشیدنعناصر در طول عملیات کشیدن نشانگر را دنبال می کنند.

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

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

رویدادها را بکشید

توجه داشته باشید:هنگام کشیدن فایل از سیستم عامل به داخل مرورگر، نه رویدادهای dragstart و dragend اجرا نمی شوند.

رابط ها

اصول اولیه

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

تشخیص دهید که چیست قابل کشیدن

ساختن یک عنصر قابل کشیدنهمانطور که در نمونه کد زیر نشان داده شده است، نیاز به افزودن ویژگی dragable و کنترل کننده رویداد جهانی ondragstart دارد:

این عنصر قابل کشیدن است.

برای اطلاعات بیشتر ببین:

قطره را مدیریت کند اثر

کنترل کننده رویداد drop برای پردازش داده های کشیدن به روشی خاص برنامه آزاد است.

به طور معمول، یک برنامه کاربردی از متد getData() برای بازیابی آیتم های درگ و سپس پردازش آنها بر اساس آن استفاده می کند. علاوه بر این، معناشناسی برنامه ممکن است بسته به مقدار آن متفاوت باشد

تکنیک‌های کشیدن و رها کردن طی سال‌ها تکامل یافته‌اند. جای تعجب نیست که با افزایش تعداد برنامه نویسانی که پلاگین های باز را توسعه می دهند کد منبع(به عنوان مثال برای jQuery) روش های قدیمی دوباره احیا می شوند. کتابخانه جاوا اسکریپت بسیار سازگار است و پیشرفت های زیادی را در این عصر فناوری وب ارائه می دهد.

در این آموزش، ما یک اسکریپت می سازیم که می توانیم از آن برای ایجاد مستطیل های پویا کشیدن و رها کردن در وب سایت خود استفاده کنیم. این فرآیند توسط جی کوئری کنترل می شود. چنین اسکریپت هایی با ارائه قابلیت های آماده در زمان صرفه جویی می کنند! و کتابخانه کشیدن و رها کردن را می توان در پروژه های دیگر استفاده کرد.

ما محتوا را آماده می کنیم

اول از همه، ما یک وب سایت کوچک برای پروژه آماده خواهیم کرد. در پوشه پروژه، باید دو دایرکتوری با نام های قابل توجه ایجاد کنید "js"و "css"و یک فایل خالی index.html . کد بسیار ساده خواهد بود به طوری که ایده روشنی از کار وجود دارد و نکته ای برای توسعه بیشتر وجود دارد.

در زیر کد ما آمده است فایل HTML. در فصل سرما شامل 3 اسکریپت هستیم. اسکریپت اصلی جی کوئری از سرور کد گوگل بارگیری می شود. فایل style.css ما نیز گنجانده شده است که حاوی ویژگی های اصلی برای شکل دهی است ظاهرسند ما

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

نصب CSS

کد HTML بسیار ساده است. اگر نشانه گذاری اولیه را درک می کنید، پس سبک های cssهمچنین دشوار نخواهد بود این عمدتا حاشیه ها، بالشتک ها و رنگ ها را تعریف می کند.

Body,html ( font-family:Calibri, sans-serif; پس‌زمینه:#eaf3fb؛ اندازه قلم:12px؛ ارتفاع:1000px؛ ارتفاع خط:18px؛ ) p (ارتفاع:30px؛ )

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

Dv1 (عرض: 200 پیکسل؛ رنگ پس‌زمینه:#eff7ff؛ حاشیه: 1 پیکسل ثابت #96c2f1؛ موقعیت: مطلق؛ چپ: 100 پیکسل؛ بالا: 100 پیکسل؛ ) .dv1 h2 (رنگ پس‌زمینه:#b2d3f5؛ بالشتک: 5 پیکسل؛ فونت- خانواده: گرجستان، "Times New Roman"، Times، سریف؛ اندازه قلم: 1.0em؛ تبدیل متن: بزرگ؛ وزن قلم: پررنگ؛ رنگ: #3a424a؛ حاشیه: 1 پیکسل؛ مکان نما: حرکت؛ ) .dv1 div ( بالشتک: 5 پیکسل؛ حاشیه-پایین: 10 پیکسل؛ ) .dv2 (رنگ پس زمینه:#f6ebfb؛ حاشیه: 1 پیکسل ثابت #a36fde؛ عرض: 550 پیکسل؛ موقعیت: مطلق؛ مکان نما: حرکت؛ چپ: 400 پیکسل؛ بالا: 230 پیکسل؛ ) .dv2 h2 (رنگ پس‌زمینه:#eacfe9؛ فاصله حروف:-0.09em؛ اندازه قلم: 1.8em؛ وزن قلم: پررنگ؛ بالشتک: 15 پیکسل؛ حاشیه: 1 پیکسل؛ رنگ:#241f24؛ مکان‌نما: حرکت؛ ) .dv2 .content2 ( padding:5px; margin-bottom:10px; )

ما برای هر دو کلاس .dv1 و .dv2 استفاده می کنیم موقعیت یابی مطلق. این ضروری نیست و احتمالاً بیشتر نیست بهترین راهبرای قرار دادن مستطیل های قابل کشیدن. با این حال، برای مثال ما، این موقعیت‌یابی منطقی است، زیرا هر بار که صفحه به‌روزرسانی می‌شود، مستطیل‌ها در مکان‌های خاصی تنظیم می‌شوند.

همچنین فونت ها و رنگ ها برای مستطیل ها متفاوت است تا تفاوت را راحت تر ببینید.

در غیر این صورت، سرفصل ها و محتوای بلوک ها تقریباً یکسان هستند. اگر سبک‌ها را در پروژه خود کپی می‌کنید، نام‌ها را قبل از اجرا تغییر دهید. در برخی موارد استفاده از شناسه ها به جای کلاس ها منطقی تر خواهد بود، مانند زمانی که از تکنیک کشیدن و رها کردن برای یک بلوک خاص استفاده می شود.

تجزیه جاوا اسکریپت

دو فایل جاوا اسکریپت حاوی تمام کدهای مورد نیاز برای کارکرد آن هستند. ما از جزئیات کار با jQuery صرف نظر می کنیم، زیرا این کار در محدوده این آموزش نیست. بیایید به فایل jquery.dragdrop.js توجه کنیم.

خط 22 تعریف تابع است می کشد.

$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20، opacity: 0.7، handler: null، onMove: function() ()، onDrop: function() ())، opts )

این متغیر بازگشتی و داده های اولیه را برای آن تنظیم می کند می کشد. این روش در هنگام کار با jQuery برای انتقال گزینه ها به توابع دیگر بسیار مورد استفاده قرار می گیرد. در داخل، ما متغیرهایی را برای همه گزینه های موجود برای مستطیل های قابل کشیدن تنظیم می کنیم.

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

Var dragdrop = ( کشیدن: تابع(e) ( var dragData = e.data.dragData; dragData.target.css(( سمت چپ: dragData.left + e.pageX - dragData.offLeft، بالا: dragData.top + e.pageY - dragData.offTop )؛ dragData.handler.css (( مکان نما: "حرکت" ))؛ dragData.target.css (( مکان نما: "حرکت" ))؛ dragData.onMove(e); ), drop: function( ه) ( var dragData = e.data.dragData؛ dragData.target.css(dragData.oldCss)؛ //.css(( "تعوض": "" ))؛ dragData.handler.css ("مکان نما"، dragData. oldCss.cursor); dragData.onDrop(e)؛ $().unbind("mousemove"، dragdrop.drag) .unbind("mouseup"، dragdrop.drop); ) )

توابع ما موقعیت CSS هر شی را دستکاری می کنند. اگر موقعیت مطلق اشیاء خود را تغییر دهید، این روی کد تأثیری نخواهد داشت، زیرا هر کدام تابع جاوا اسکریپتهر سبکی که برای شی تعریف شده است را تغییر می دهد.

در بقیه کدها، کنترلر بررسی می شود و سایر سبک ها از نظر زیبایی تغییر می کنند. در اینجا می توانید تغییری در شفافیت، فونت و رنگ اضافه کنید یا پاراگراف های جدید اضافه کنید.

توابع کشیدن/ رها کردن

فایل fn.js دوم حاوی کد بسیار ساده ای است. ما منتظر می مانیم تا سند به طور کامل بارگیری شود و پس از آن توابع خود را فراخوانی می کنیم. دو نمونه تابع تعریف شده است می کشد، که قبلا به آن پرداخته شد.

ما دو بلوک شناور با کلاس های .dv1 و .dv2 داریم. اگر باید یک بلوک شناور را ترک کنید، فقط باید قسمت دوم کد را حذف کنید. اضافه کردن یک بلوک شناور دیگر نیز آسان است. فقط باید اضافه کنید ویژگی جدیددر این فایل

اولین مرحله تنظیم گزینه ها هنگام فراخوانی تابع است. حتماً نام کنترل کننده را تنظیم کنید. با آن، به جی کوئری می‌گوییم که وقتی دکمه ماوس را فشار می‌دهیم از کدام هندلر استفاده کند منطقه خاصسند نام کنترل کننده می تواند یک کلاس یا یک ویژگی ID باشد.

اولین تابع ما دارای دو کنترل کننده رویداد است onMoveو onDrop. هر دو توابع جدیدی را فراخوانی می کنند که به عنوان متغیر به رویداد فعلی ارسال می شوند. اینجاست که کد HTML در مستطیل دستکاری می شود تا در هر حرکت به روز شود. این یک اثر عالی برای نشان دادن نحوه کنترل فرآیند با رویدادهای ساده جی کوئری است.

در تابع دوم از پارامترهای z-Index و opacity استفاده می کنیم. می توانید دیگران را اضافه کنید ویژگی های css? اما این نیاز به بازنویسی کد جاوا اسکریپت برای تأیید اعتبار نصب ها دارد. به عنوان مثال، می توانید یک سبک یا مقادیر مختلف فونت را برای ارتفاع و عرض مستطیل شناور ارسال کنید - یک ترفند بسیار جالب!

نتیجه

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

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

بنابراین اسناد jQuery را برای استفاده از توابع کتابخانه بررسی کنید.