رویداد ondragstart در HTML5 عمل شروع drag ماوس

در این مقاله از سایت آموزی جهت استفاده شما عزیزان به معرفی رویداد ondragstart در html5 می پردازیم.

ویژگی رویدادی ondragstart زمانی رخ میدهد که در یک تگ html عمل کشیدن و رها کردن یا Drag and Drop به وسیله ماوس شروع شده باشد.

خصوصیت ondragstartr یک رویداد عمومی تگ های html است.

معرفی ویژگی ondragstart در زبان اچ تی ام ال

رویداد ondragstart در html5 زمانی رخ میدهد که در یک تگ html عمل کشیدن یا Drag به وسیله ماوس شروع شده باشد. خصوصیت دراگ و دراپ در HTML5 معرفی شده و توسط چند ویژگی و رویداد کنترل می شوذ.

که خاصیت رویدادی ondragstart و صفت draggable از جمله آنها می باشد. لینک ها و تصاویر برای کشیده شدن نیازی به صفت draggable ندارند.

ویژگی رویدادی ondragstart در دسته رویداد های ماوس قرار می گیرد. این رویداد هم جزء رویداد عمومی در تگ های html است.

ویژگی ها و رویدادهای دراگ و دراپ کردن تگ های html عبارتند از :

ondragstart
ondragend
ondrag
ondragenter
ondragover
ondragleave
ondrop

مثال در مورد استفاده از رویداد ondragstart در html5 درون تگ p

<p style=”clear:both;”><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>
<p id=”demo”></p>

<script>
function dragStart(event) {
event.dataTransfer.setData(“Text”, event.target.id);
document.getElementById(“demo”).innerHTML = “Started to drag the p element”;
}

function dragEnd(event) {
document.getElementById(“demo”).innerHTML = “Finished dragging the p element.”;
}

function allowDrop(event) {
event.preventDefault();
}

function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData(“Text”);
event.target.appendChild(document.getElementById(data));
}
</script>