آموزش صفت عمومی 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
نکات و توضیحات
صفت dropzone یک صفت جدید است که در HTML5 اضافه شده است.
این صفت توسط هیچ یک از مرورگرهای اینترنتی پشتیبانی نمیشود، لذا در صورت استفاده از این صفت شما شاهد هیچگونه عملی نخواهید بود.
