دليل مرجع HTML

مجمع علامات HTML

خصائص draggable لـ HTML

الخصائص العالمية draggable هي خاصية من نوع قائمة، تستخدم لتحديد ما إذا كان يمكن استخدام API التسلسل والتنقل لسحب العنصر.

قيمة draggable كالتالي:
　　　 true، تعني أن العنصر قابل للسحب
　　　 false، تعني أن العنصر غير قابل للسحب
إذا لم يتم تعيين هذه الخاصية، فإن القيمة الافتراضية هي auto، مما يعني استخدام سلوك افتراضي معرف من قبل المتصفح
هذا المفتاح من نوع تصنيفي، وليس من نوع منطقي. هذا يعني أنه يجب تحديد القيمة بشكل صريح كـ true أو false، وغير مسموح باستخدام اختصارات مثل <label draggable>مثال</label>، يجب استخدام النمذجة الصحيحة مثل <label draggable="true">مثال</label>.
بالافتراض، يمكن سحب النص المحدد فقط، والصور، والروابط. للعناصر الأخرى، يجب تعيين أحداث ondragstart حسب ترتيب آلية السحب لتعمل بشكل صحيح

خصائص العنصر العالمية HTML

مثال عبر الإنترنت

مثال يوضح فقرة قابلة للتحريك:

مثال

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style type="text/css">
#div1 {width:400px;height:80px;padding:10px;border:1px solid red;}
</style>
<script type="text/javascript">
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)">هذا فقرة قابلة للتحريك. يرجى سحب هذه الفقرة إلى المربع الأحمر في الأعلى.</p>
</body>
</html>

اختبار لمعرفة ‹/›

توافق المتصفحات

IEFirefoxOperaChromeSafari

Internet Explorer 9+، Firefox، Opera، يدعم متصفحات Chrome وSafari خاصية draggable.

ملاحظة: لا يدعم متصفح Internet Explorer 8 وأحدث إصدارات IE خاصية draggable.

التعريف والاستخدام

تحدد خاصية draggable ما إذا كان العنصر قابل للسحب.
نصيحة:الروابط والصور قابلة للسحب افتراضياً.
نصيحة: يستخدم خاصية draggable عادة في عمليات السحب والإفلات.

الفرق بين HTML 4.01 و HTML5

خصائص draggable هي ميزة جديدة في HTML5.

النحو

　　　　 <عنصر draggable="true|false|auto">

قيمة الخاصية

القيمة	الوصف
true	يحدد أن العنصر قابل للسحب.
false	يحدد أن العنصر غير قابل للسحب.
auto	استخدام خصائص المتصفح الافتراضية.

خصائص العنصر العالمية HTML

HTML: <template> العنوان