قدم قبلی >< قدم بعدی

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

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

در این آموزش html به کشیدن و رها کردن HTML می پردازیم.

کشیدن و رها کردن یک ویژگی بسیار رایج است. این زمانی است که شما “شیء” را جابجا کنید و آن را به مکان دیگری بکشید.

در HTML5، کشیدن و رها بخشی از استاندارد است: هر عنصر می تواند draggable باشد.

به عنوان مثال کشیدن و رها کردن HTML

مثال زیر یک مثال ساده کشیدن و رها کردن است:

این ممکن است به نظر پیچیده، اما اجازه می دهد تا از طریق تمام قسمت های مختلف یک رویداد کشیدن و رها کردن بروید.

عنصر Draggable را ایجاد کنید

اول از همه: برای ایجاد یک element draggable، ویژگی draggable را به true تنظیم کنید:

چه چیزی برای کشیدن – ondragstart و setData ()

سپس، مشخص کنید چه اتفاقی می افتد وقتی عنصر کش می شود.

در مثال بالا، attribute ondragstart یک تابع را فراخوانی می کند، drag (event)، که مشخص می کند چه اطلاعاتی را کش می کند.

روش dataTransfer.setData () نوع داده و مقدار داده های کشش را تنظیم می کند:

در این مورد، نوع داده “متن” است و مقدار شناسه عنصر draggable است.

کجا برای رها کردن-ondragover

رویداد ondragover مشخص می کند که کدام داده می تواند حذف شود.

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

این کار با فراخوانی روش event.preventDefault () برای رویداد indragover انجام می شود:

آیا رها کردن – در حال حرکت

هنگامی که داده های کششی کاهش می یابد، یک رویداد رها رخ می دهد.

در مثال بالا، attribute atdrop یک تابع را فراخوانی می کند (رویداد):

توضیح کد:

  • call preventDefault () برای جلوگیری از بارگیری پیش فرض مرورگر داده ها (به طور پیش فرض به عنوان لینک در حالت افتتاح باز است)
  • داده های کشش شده را با روش dataTransfer.getData () دریافت کنید. این روش هر نوع اطلاعاتی را که در روش setData () برای همان نوع تنظیم شده است را بازگرداند
  • داده کشیده شده، شناسه عنصر کشیده شده است (drag1)
  • عنصر کشش شده را به عنصر رها اضافه کن
گام قبلی >< گام بعدی