آموزش رویداد عمومی OnDragEnter در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش رویداد عمومی OnDragEnter در HTML با من همراه باشید.
Free-Learn
رویداد عمومی OnDragEnter در HTML
رویداد ondragenter زمانی رخ میدهد که عنصر در حال کشیده شدن وارد محدوده (محدوده ای که قرار است در آن رها شود) شود.
رویداد OnDragEnter معمولا بهمراه رویداد OnDragLeave برای مشخص کردن , وارد شدن و خارج شدن عنصر در محدوده ی رها شدن مورد استفاده قرار میگیرد.
Free-Learn
مثال از رویداد عمومی OnDragEnter در 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 35 36 37 38 39 40 41 |
<body> <div class="droptarget" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">منو با ماوس بگیر</p> </div> <div class="droptarget" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <p style="clear:both;" id="demo"></p> <script> function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function dragEnter(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted blue"; document.getElementById("demo").innerHTML = "وارد محدوده شد"; } } function dragLeave(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; 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)); } </script> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از رویداد ondragenter در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | ۴٫۰ | ۳٫۵ | ۱۲٫۰ | ۶٫۰ | ۹٫۰ |
Free-Learn
روش استفاده
روش استفاده از این رویداد در عناصر HTML بصورت زیر می باشد.
|
1 |
<element ondragenter="script"> |
Free-Learn
جدول مقادیر رویداد OnDragEnter
در جدول زیر میتوانید مقادیری را که میتوان در این رویداد استفاده کرد را مشاهده نمایید.
| مقدار | توضیح |
| script | دستورات جاوااسکریپت برای اجرا شدن |
Free-Learn
عناصری که توسط این رویداد پشتیبانی می شوند
رویداد ondragenter را میتوان در تمامی عناصر/تگ های HTML بکار برد.
Free-Learn
نکات و توضیحات
رویداد ondragenter یک رویداد جدید/اضافه شده در HTML5 می باشد.
