این آموزش در تاریخ ۱۴۰۰/۰۹/۰۸ آپدیت شده است.
آموزش صفت عمومی dropzone در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت عمومی dropzone در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت عمومی dropzone در HTML
صفت dropzone صفتی است که با یکی از مقادیر copy یا move یا link تنظیم می شود و مشخص میکند که یک عنصر در حالت کشیدن و رها شدن در چه وضعیتی قرار دارد.
هرچند این صفت در HTML5 اضافه شده است ولی با اینحال توسط هیچکدام از مرورگرهای اینترنتی پشتیبانی نمیشود، عملا الکیه
Free-Learn
مثال از صفت dropzone در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div dropzone="copy file:image/png file:image/gif file:image/jpeg" ondrop="receive(event, this)"> <p>تصویر را با ماوس بکشید در این قسمت رها نمایید</p> </div> <script> function receive(event, element) { var data = event.dataTransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { var img = new Image(); img.src = window.createObjectURL(data[i].getAsFile()); element.appendChild(img); } } } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت dropzone در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | خیر | خیر | خیر | خیر | خیر |
Free-Learn
روش استفاده
روش استفاده از این صفت در عناصر HTML بصورت زیر می باشد.
|
1 |
<element dropzone="copy|move|link"> |
Free-Learn
جدول مقادیر صفت dropzone
در جدول زیر میتوانید مقادیر را که میتوان در این صفت استفاده کرد را مشاهده نمایید.
| مقدار | توضیح |
| copy | نشان میدهد که عنصر کشیده شده کپی شده است |
| move | نشان میدهد که عنصر کشیده شده به مکان جدیدی منتقل شده است |
| link | یک لینک به داده های کشیده شده ایجاد میکند |
Free-Learn
نکات و توضیحات
- این صفت توسط هیچ یک از مرورگرهای اینترنتی پشتیبانی نمیشود، لذا در صورت استفاده از این صفت شما شاهد هیچگونه عملی نخواهید بود.
