کشیدن (Drag) و انداختن (Drop)

کشیدن و انداختن عناصر یکی از ویژگی های خیلی معمول HTML5 است. منظور از کشیدن و انداختن زمانی است که یکی از اشیاء داخل صفحه را بگیرید و به محلی دیگر بکشید و رها نمایید.

در HTML5 هر عنصری در صفحه می تواند قابل کشیدن (draggable) باشد.

عنصر مورد نظر را قابل جا به جا کردن کنید

در مرحله اول باید کاری کنید تا عنصر مورد نظرتان، قابل جا به جا شدن باشد.

برای این منظور باید خاصیت drggable را با مقدار true تنظیم نمایید:

bbv

تعیین عنصری که می خواهید جا به جا شود

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

در کد بالا، خاصیت ondragstart عنصر <img>، را با رویداد (drag(event تنظیم کرده ایم. این رویداد تعیین می کند چه عنصری می خواهد جابه جا شود. این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید.

متد ()dataTransfer.setData اطلاعات عنصری که قرار است کشیده شود، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد. این id از نوع “Text” بوده و مقدار آن در این مثال drag1 است.

tra

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

رویداد ondragover مشخص کننده محلی است که داده ی جابه جا شده را می توان رها نمود.

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

این کار هنگامی که رویداد ondragover اتفاق می افتد، با صدا زدن متد ()ev.preventDefault انجام می شود:

fd

رها کردن عنصر جابه جا شده

پس از انتخاب عنصر و جابه جا کردن آن، باید مکانی که فرود (drop) می آید را تعیین کرده و سپس آنرا رها نمایید.

در مثال بالا، هنگامی که عکس را در مکان تعیین شده رها می کنید، رویداد ondrop تگ <div> رخ داده و تابع drop را فراخوانی می کند.

bbvc

توضیح کد:

بصورت پیشفرض، عناصر و داده ها را نمی توان جابه جا نمود. بنابراین با صدا زدن متد ()ev.preventDefault از این کار جلوگیری می کنیم.
توسط متد ()ev.dataTransfer.getData، شناسه یا همان id عنصر drag شده را دریافت می کنیم. این متد شناسه همان نوع داده ای را که در متد ()setData تنظیم کردید، برمی گرداند.
این id از نوع “Text” بوده و مقدار آن در این مثال drag1 است.
متد ()ev.target.appendChild عنصر انتخاب شده را به تگ div مرتبط می سازد.