5) صفت draggable :
🌟 زبان html5 ، یک زبان markup و نشانه گذاری صرف نیست . بلکه بسیاری از ویژگی های تعاملی و گرافیکی به آن اضافه شده است .
در واقع ، html5 امکان اضافه کردن ویژگی هایی از تکنولوژی های مختلف ، مثل جاوااسکریپت را به خودش اضافه کرده است که در ورژن های قبلی html موجود نبود . و هم چنین چون فرض آموزشی ما این است که هنوز با زبان جاوااسکریپت آشنایی نداریم لذا از بیان کل مطالب مربوط به این موارد خودداری می کنیم و تنها به گفتن چیزهای که باعث درک کار این امکانات جدید شود اکتفا می کنیم و ان شاالله بعد از یادگیری زبان جاوااسکریپت که در آینده خواهد آمد به این امکانات برگشته و به صورت کامل توضیحات آن را ارائه می کنیم . پس لازم نیست نگران باشید .
🌟 صفت draggable ، به ما امکان انتقال دادن یک المان به جای دیگر را می دهد . البته المان های لینک و عکس به صورت پیشفرض این قابلیت را دارند .
🌟 می توانیم خیلی ساده ، draggable بودن المان لینک را مشاهده کنیم . کافیست مرورگر را باز کنید و یک سایت اینترنی را باز کنید و بروید روی لینک و آنرا drag کنید . به راحتی فهمیدید که لینک ها به صورت پیشفرض این خاصیت را دارند . اما آیا در همین صفحه می توانیم یک قطعه متن را drag کنیم ؟ خیر نمی شود اما html5 این قابلیت را به ما می دهد !
🌟 صفت dragabble می تواند سه مقدار بگیرد :
1 ) مقدار true : این مقدار باعث می شود که المان ما dragabble باشد .
2 ) مقدار false : این مقدار باعث می شود که المان ما dragabble نباشد .
3 ) مقدار auto : با دادن این مقدار ، همان چیزی که پیشفرض مرورگر است اعمال می شود .
🌟 این صفت توسط همه ی مرورگرها پشتیبانی می شود .
🌟 مثال عملی :
اکنون برای اینکه نحوه ی کاربرد این صفت را ببینید ، مثال زیر را انجام دهید :
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 شوید.
