5)  صفت draggable :

🌟  زبان html5 ، یک زبان markup و نشانه گذاری صرف نیست . بلکه بسیاری از ویژگی های تعاملی و گرافیکی به آن اضافه شده است .

در واقع ، html5 امکان اضافه کردن ویژگی هایی از تکنولوژی های مختلف ، مثل جاوااسکریپت را به خودش اضافه کرده است که در ورژن های قبلی html موجود نبود . و هم چنین چون فرض آموزشی ما این است که هنوز با زبان جاوااسکریپت آشنایی نداریم لذا از بیان کل مطالب مربوط به این موارد خودداری می کنیم و تنها به گفتن چیزهای که باعث درک کار این امکانات جدید شود اکتفا می کنیم و ان شاالله بعد از یادگیری زبان جاوااسکریپت که در آینده خواهد آمد به این امکانات برگشته و به صورت کامل توضیحات آن را ارائه می کنیم . پس لازم نیست نگران باشید .


🌟  صفت draggable ، به ما امکان انتقال دادن یک المان به جای دیگر را می دهد . البته المان های لینک و عکس به صورت پیشفرض این قابلیت را دارند .


🌟  می توانیم خیلی ساده ، draggable بودن المان لینک را مشاهده کنیم . کافیست مرورگر را باز کنید و یک سایت اینترنی را باز کنید و بروید روی لینک و آنرا drag کنید . به راحتی فهمیدید که لینک ها به صورت پیشفرض این خاصیت را دارند . اما آیا در همین صفحه می توانیم یک قطعه متن را drag کنیم ؟ خیر نمی شود اما html5 این قابلیت را به ما می دهد !


🌟  صفت dragabble می تواند سه مقدار بگیرد :

1 )   مقدار true : این مقدار باعث می شود که المان ما dragabble باشد .

2  )  مقدار false : این مقدار باعث می شود که المان ما dragabble نباشد .

3 )  مقدار auto : با دادن این مقدار ، همان چیزی که پیشفرض مرورگر است اعمال می شود .


< element dragabble="value" >



🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود .


🌟  مثال عملی :

اکنون برای اینکه نحوه ی کاربرد این صفت را ببینید ، مثال زیر را انجام دهید :

1  )  نوت پد را باز کنید و قطعه کد زیر را در آن وارد کنید 


<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)">This is a draggable paragraph. Drag this element into the rectangle.</p>

</body>
</html>


🔹 می خواهیم متن موجود در تگ p جابه جا گردد و به یک مکانی فرستاده شود . برای این کار لازم است صفت draggable تگ p را true کنیم و یک مکانی هم تعریف کنیم و توایع جاوااسکریپت مورد نیاز را وارد کنیم .

2  )  فایل را با نام دلخواه و پسوند html. در یک مکانی ذخیره کنید

3 )  اکنون فایل را با مرورگر باز کنید . مشاهده می شود که متن نوشته شده را می توانیم به محدوده ی مشخص شده ی بالا drag کنیم .

🌟  یادتان باشد که نیاز نیست به طور کامل بفهمید که این کار چطور انجام شده است . فقط بدانید که صفت dragabble چطور اعمال شده است و در نهایت چه اتفاقی افتاده است .



برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.