ondragover ఇవెంట్
定义和用法
当可拖动元素或文本选择被拖动到有效放置目标上时,会发生 ondragover 事件。
默认情况下,不能在其他元素中删除数据/元素。为了允许放置,我们必须阻止元素的默认处理。这是通过调用 ondragover 事件的 event.preventDefault() 方法来实现的。
拖放是 HTML5 中非常常见的功能。就是当您“抓取”一个对象并将其拖动到不同位置时。如需学习更多知识,请阅读我们关于 HTML5 తీసుకువెళ్ళడం మరియు పెట్టడం的 HTML 教程。
注释:如需使元素可拖动,请使用全局 HTML5 draggable 属性。
提示:默认情况下,链接和图像是可拖动的,不需要 draggable 属性。
在拖放操作的不同阶段,有许多事件被使用,并且可能发生:
在可拖动目标(源元素)上触发的事件:
- ondragstart - 当用户开始拖动元素时发生
- ondrag - 当元素被拖动时发生
- ondragend - 当用户完成拖动元素时发生
在放置目标上触发的事件:
- ondragenter - 当被拖动的元素进入放置目标时发生
- ondragover - 当被拖动的元素在放置目标上时发生
- ondragleave - 当被拖动的元素离开放置目标时发生
- ondrop - 当被拖动的元素被放在放置目标上时发生
注释:拖动元素时,ondragover 事件每 350 毫秒触发一次。
语法
在 HTML 中:
<element ondragover="myScript">
在 JavaScript 中:
object.ondragover = function(){myScript};
在 JavaScript 中,使用 addEventListener() 方法:
object.addEventListener("dragover", myScript);
注释:ఇంటర్నెట్ ఎక్స్లోరర్ 8 లేదా ఆందరికి ముందు వరుసలు మద్దతు ఇవ్వడం లేదు addEventListener() పద్ధతి。
సాంకేతిక వివరాలు
బ్యూమింగ్ ప్రక్రియ లో ఉంటుంది: | మద్దతు పొందుతుంది |
---|---|
రద్దు చేయదగినది: | మద్దతు పొందుతుంది |
సంఘటన రకం: | DragEvent |
మద్దతు పొందే HTML టాగ్స్: | అన్ని HTML ఎలమెంట్స్ |
DOM సంస్కరణ: | స్థాయి 3 సంఘటనలు |
బ్రౌజర్ మద్దతు
పట్టికలో వివరించిన సంఘటనలను పూర్తిగా పరిగణించే మొదటి బ్రౌజర్ సంస్కరణలు.
సంఘటన | చ్రోమ్ | ఐఇ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
---|---|---|---|---|---|
ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
మరిన్ని ఉదాహరణలు
ప్రతీ సాధ్యమైన డ్రాగ్ ఎండ్ డ్రాప్ సంఘటనల ప్రదర్శన:
<p draggable="true" id="dragtarget">డ్రాగ్ నాకు!</p> <div class="droptarget">ఇక్కడ డ్రాప్ చేయండి!</div> <script> /* ----------------- డ్రాగ్ లక్ష్యంపై తీసుకువచ్చే సంఘటనలను ----------------- */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData() పద్ధతి డ్రాగబలిత డాటా యొక్క డాటా రకాన్ని మరియు విలువను నిర్ణయిస్తుంది event.dataTransfer.setData("Text", event.target.id); // డ్రాగింగ్ ప్ ఎలమెంట్ ప్రారంభం అయిన తర్వాత పదబంధాన్ని అవుట్పుట్ చేయండి document.getElementById("demo").innerHTML = "డ్రాగింగ్ ప్ ఎలమెంట్ ప్రారంభం అయినప్పుడు పదబంధాన్ని అవుట్పుట్ చేయండి."; // డ్రాగబలిత ఎలమెంట్ అస్తిత్వం పరిమాణాన్ని మార్చండి event.target.style.opacity = "0.4"; }); // డ్రాగింగ్ ప్ ఎలమెంట్ చేయడంలో పదబంధాన్ని రంగును మార్చండి document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // డ్రాగింగ్ ప్ ఎలమెంట్ పూర్తి అయిన తర్వాత పదబంధాన్ని అవుట్పుట్ చేసి అస్తిత్వం పరిమాణాన్ని పునఃసంస్థాపించండి document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "డ్రాగింగ్ ప్ ఎలమెంట్ పూర్తి అయినప్పుడు."; event.target.style.opacity = "1"; }); /* ----------------- డ్రాప్ టాగెట్లో జరుగుతున్న ఇవెంట్లు ----------------- */ // డ్రాగబుల్ ప్ కెమెంట్ డ్రాప్టెర్టాగ్లోకి ఎంటర్ చేసినప్పుడు డివ్ యొక్క బార్డర్ స్టైల్ను మార్చండి document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } }); // డిఫాల్ట్ విధంగా, కార్యక్రమాలను మరొక కెమెంట్లో డ్రాప్ చేయలేము/డ్రాగ్ చేయలేము. డ్రాప్ అనుమతించడానికి, మాదిరిగా కెమెంట్ల యొక్క డిఫాల్ట్ హాండింగ్ను నిరోధించాలి document.addEventListener("dragover", function(event) { event.preventDefault(); }); // డ్రాగబుల్ ప్ కెమెంట్ డ్రాప్టెర్టాగ్ నుండి బయటకు వెళ్ళినప్పుడు డివ్ యొక్క బార్డర్ స్టైల్ను పునఃస్థాపించండి document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /* డ్రాప్ అయ్యేటప్పుడు - బ్రౌజర్ యొక్క డేటా యొక్క డిఫాల్ట్ హాండింగ్ నిరోధించండి (డిఫాల్ట్ డ్రాప్ చేసినప్పుడు లింక్ ఆపెన్ చేస్తారు) అవుట్పుట్ టెక్స్ట్ యొక్క రంగును మరియు DIV యొక్క బార్డర్ రంగును పునఃస్థాపించండి dataTransfer.getData() మాదిరిగా డ్రాగ్ చేసిన డేటాను పొందండి డ్రాగ్ చేసిన డేటా డ్రాగ్ అయ్యే కెమెంట్ యొక్క id ("drag1") డ్రాగ్ అయ్యే కెమెంట్ను డ్రాప్ కెమెంట్లో జతచేయండి */ document.addEventListener("drop", function(event) { event.preventDefault(); if ( event.target.className == "droptarget" ) { document.getElementById("demo").style.color = ""; event.target.style.border = ""; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } }); </script>