خانه آموزش HTML صفات عمومی HTML آموزش صفت عمومی dropzone در HTML

آموزش صفت عمومی dropzone در HTML

توسط

۱۳۹۷-۰۴-۲۳

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت عمومی dropzone در HTML با من همراه باشید.

آموزش صفت عمومی dropzone در HTML

Free-Learn

آنچه در این جلسه میخوانید :

1 صفت عمومی dropzone در HTML
2 مثال از صفت dropzone در HTML
3 پشتیبانی مرورگرها
4 روش استفاده
5 جدول مقادیر صفت dropzone
6 نکات و توضیحات

صفت عمومی dropzone در HTML

صفت dropzone صفتی است که با یکی از مقادیر copy یا move یا link تنظیم می شود و مشخص میکند که یک عنصر در حالت کشیدن و رها شدن در چه وضعیتی قرار دارد.

هرچند این صفت در HTML5 اضافه شده است ولی با اینحال توسط هیچکدام از مرورگرهای اینترنتی، نه کامپیوتر و نه گوشی های موبایل پشتیبانی نمیشود.

Free-Learn

مثال از صفت dropzone در HTML

در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.

<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>

<p>تصویر را با ماوس بکشید در این قسمت رها نمایید</p>

</div>

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 بصورت زیر می باشد.

<element dropzone="copy|move|link">

1	<element dropzone="copy\|move\|link">

Free-Learn

جدول مقادیر صفت dropzone

در جدول زیر میتوانید مقادیر را که میتوان در این صفت استفاده کرد را مشاهده نمایید.

مقدار	توضیح
copy	نشان میدهد که عنصر کشیده شده کپی شده است
move	نشان میدهد که عنصر کشیده شده به مکان جدیدی منتقل شده است
link	یک لینک به داده های کشیده شده ایجاد میکند

Free-Learn

نکات و توضیحات

صفت dropzone یک صفت جدید است که در HTML5 اضافه شده است.

این صفت توسط هیچ یک از مرورگرهای اینترنتی پشتیبانی نمیشود، لذا در صورت استفاده از این صفت شما شاهد هیچگونه عملی نخواهید بود.

Free-Learn

فروشگاه فری لرن

دریافت PDF یا پرینت این مطلب