آموزش رویداد عمومی OnDrag در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش رویداد عمومی OnDrag در HTML با من همراه باشید.
Free-Learn
رویداد عمومی OnDrag در HTML
رویداد ondrag زمانی رخ میدهد که یک عنصر دِرَگ شود, یا خودمونی وقتی عنصری با ماوس گرفته شود و بخواهد به مکانی دیگر برده و انداخته شود.
کشیدن و انداختن یا به انگلیسی Drag and Drop یعنی اینکه ما یک عنصر را با ماوس گرفته و به مکانی دیگر برده و در نهایت آن را رها نماییم. این رویداد در HTML5 اضافه شده است.
Free-Learn
مثال از رویداد عمومی OnDrag در HTML
در ادامه میتوانید یک مثال از این رویداد را مشاهده نمایید.
|
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 28 29 30 31 32 33 34 |
<body> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget"> منو با ماوس بگیر </p> </div> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <p style="clear:both;" id="demo"></p> <script> function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function dragging(event) { document.getElementById("demo").innerHTML = "عنصر در حال کشیده شدن می باشد"; } function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); document.getElementById("demo").innerHTML = "عنصر کشید و انداخته شد"; } </script> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از رویداد ondrag در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | ۴٫۰ | ۳٫۵ | ۱۲٫۰ | ۶٫۰ | ۹٫۰ |
Free-Learn
روش استفاده
روش استفاده از این رویداد در عناصر HTML بصورت زیر می باشد.
|
1 |
<element ondrag="script"> |
Free-Learn
جدول مقادیر رویداد OnDrag
در جدول زیر میتوانید مقادیری را که میتوان در این رویداد استفاده کرد را مشاهده نمایید.
| مقدار | توضیح |
| script | دستورات جاوااسکریپت برای اجرا شدن |
Free-Learn
عناصری که توسط این رویداد پشتیبانی می شوند
رویداد ondrag را میتوان در تمامی عناصر/تگ های HTML بکار برد.
Free-Learn
نکات و توضیحات
رویداد ondrag یک رویداد جدید/اضافه شده در HTML5 می باشد.
