٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش کشیدن / رهاکردن HTML

در HTML می توان هر عنصری را کشید و رها کرد. مثال تصویر W3Schools را به مستطیل بکشید.     کشیدن و انداختن کشیدن و رها کردن یک ویژگی بسیار رایج است. این زمانی است که شما یک شی را “بگیرید”…

محمد یوسفی

3 جولای 2021

در HTML می توان هر عنصری را کشید و رها کرد.


مثال

تصویر W3Schools را به مستطیل بکشید.

 

 


کشیدن و انداختن

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


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

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کند که از Drag and Drop به طور کامل پشتیبانی می کند.


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

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

مثال

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

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


یک عنصر قابل جمع کردن بسازید

اول از همه: برای کشیدن یک عنصر ، draggableویژگی را روی true قرار دهید:

<img draggable="true">

What to Drag – ondragstart و setData ()

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

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

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

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

در این حالت ، نوع داده “متن” است و مقدار آن شناسه عنصر قابل کشیدن است (“drag1”).


کجا رها کنیم – ondragover

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

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

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

event.preventDefault()

قطره را انجام دهید – ondrop

هنگامی که داده های کشیده شده رها می شوند ، یک رویداد افت اتفاق می افتد.

در مثال بالا ، ویژگی ondrop یک تابع ، قطره (رویداد) را فراخوانی می کند:

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

کد توضیح داد:

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

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها