شما با استفاده از این قابلیت میتونید یک object روی صفحه ی وبتون رو بگیرید و بکشید و در یک مکان دیگه رها کنید .
این قابلیت در مرورگرهای Explorer 9+, Firefox, Opera, Chrome, Safari پشتیبانی میشه . اما در Safari 5.1.2 پشتیبانی نمیشه .
حالا بیاید باهم یک drag and drop ساده ایجاد کنیم .
اول یک تصویر میذاریم و قابلیت drag رو بهش میدیم draggable=”true” :
|
<imgsrc="logo.png"draggable="true" > |
چون قراره از جاواساکریپت استفاده کنیم ، پس باید این عنصر یه جوری توسط جاوا اسکریپت شناسایی بشه ، پس یه id هم براش میذاریم ، قابل ذکر هست که این id باید با drag شروع بشه و هر تعداد که هست شماره گذاری بشه و جلو بره . مثلا drag1 , drag2 , drag3 و … .
|
<img src="logo.png"draggable="true"id="drag1"> |
خوب حالا میخوایم یه باکس هم قرار بدیم که که این تصویر رو بگیریم ، بکشیم و در اون باکس رها کنیم . پس یک div هم به کدمون اضافه میکنیم ، چون باید این div توسط جاوااسکریپت شناسایی بشه پس باید دارای id باشه . مقدار id این باکس هم با div شروع میشه و به ترتیب شماره گذاری میشه : div1 , div2 , div3
خوب برای drag and drop ما نیاز به 3 تابع در جاوااسکریپت داریم ، که هر کجا که خواستید میتونید این سه تابع رو فراخوانی کنید و استفاده کنید . (چون جی کوئری استفاده نمیکنیم نیازی به کتابخانه جی کوئری هم نداریم ) این سه تابع به شرح زیر هست :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
functionallowDrop(ev)
{
ev.preventDefault();
}
functiondrag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev)
{
ev.preventDefault();
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
} |
تابع allowDrop : هر کجا که این تابع رو صدا بزنید ، نشان دهنده ی این هست که اون ناحیه قابلیت این رو داره که اشیاء رو در خودش نگه داره ، به عبارتی در اون ناحیه اشیاء مجاز به فرود هستند و شما میتونید فقط تو اون ناحیه اشیاء رو drop کنید . به طور کلی برای نواحی که قراره عمل DROP روشون انجام بشه ، این رویداد رو صدا میزنیم .
تابعdrag : عمل کشیدن object یا شیء رو روی صفحه امکان پذیر میکنه .
تابعdrop: عمل رها کردن شیء رو امکان پذیر میکنه .
هر کجا که بخواین فقط کافیه این سه تابع رو استفاده کنید .
خوب حالا باید به تصویرمون خاصیت ondragstart رو بدیم تا رویداد drag رو بتونیم رو تصویر اعمال کنیم ، یعنی بتونیم تصویر رو با موس روی صفحه بکشیم ، با این خاصیت ما هرگاه که تصویر رو بکشیم تابع drag جاوااسکریپت اجرا میشه :
|
<img src="logo.png"draggable="true"id="drag1"ondragstart="drag(event)"> |
حالا باید به باکسمون رویداد ondrop رو بدیم تا بتونیم رویداد drop رو در باکس اعمال کنیم و در نهایت باید خاصیت ondragover رو لحاظ کنیم تا بتونیم تابع allowDrop رو صدا بزنیم و بگیم که فقط تو این ناحیه drop مجاز هست :
|
<divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div> |
تصویری از نتیجه ی کار رو میتونید در زیر مشاهده کنید :
خوب تموم شد 
تمامی کدها بصورت کامل در قالب یک فایل html در فایل ضمیمه قرار داده شد ؛ شما میتونید با استفاده از آموزشی که دادیم این عمل رو انجام بدید کافیه فایل ضمیمه رو دانلود کنید ، index رو اجرا کنید تا نتیجه رو بصورت زنده ببینید و لذت ببرید .
شما میتونید هر استایلی که میخواین به کدها بدید و هرگونه که موردنظرتون هست اون رو پیاده سازی کنید .
تهیه شده در مدرسه مجازی ایرانیان
دریافت فایلرمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com
اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید