ondragover ਈਵੈਂਟ

DOM ਈਵੈਂਟ DragEvent

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

ਜਦੋਂ ਲਿਆਉਣ ਵਾਲਾ ਇਲੈਕਟ੍ਰੌਨ ਜਾਂ ਟੈਕਸਟ ਚੋਣ ਹੋਂਦੇ ਹੋਏ ਪ੍ਰਮਾਣਿਕ ਸਥਾਨ ਨੂੰ ਪਾਸ ਕਰਦੇ ਹਨ ਤਾਂ ondragover ਈਵੈਂਟ ਹੁੰਦਾ ਹੈ。

ਮੂਲ ਰੂਪ ਵਿੱਚ،ਕੋਈ ਹੋਰ ਇਲੈਕਟ੍ਰੌਨ ਵਿੱਚ ਲਿਆਉਣ ਦਾ ਨਹੀਂ ਹੁੰਦਾ।ਜਦੋਂ ਪਾਸ ਕਰਨ ਨੂੰ ਅਨੁਮਤੀ ਦੇਣਾ ਹੈ ਤਾਂ ਇਲੈਕਟ੍ਰੌਨ ਦੇ ਮੂਲ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਰੋਕਣਾ ਹੈ।ਇਹ ondragover ਈਵੈਂਟ ਦੇ event.preventDefault() ਮੱਥ ਦੁਆਰਾ ਹੋਵੇਗਾ

ਟ੍ਰੈਕ ਕਰਨ ਦਾ ਹੈ।ਤੁਸੀਂ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ ਬਾਰੇ ਪੜ੍ਹੋ HTML5 ਖਾਕਾਬਾਜ਼ੀਦੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਿੱਖਣ ਦੀ ਸਿੱਖਿਆ

ਟਿੱਪਣੀਆਂ:ਜੇਕਰ ਇਲੈਕਟ੍ਰੌਨ ਲਿਆਉਣ ਵਾਲਾ ਹੋਣਾ ਹੈ ਤਾਂ ਵਿਸ਼ਵ ਹੀਟਲ ਵਿੱਚ ਵਰਤੋਂ ਕਰੋ HTML5 draggable ਲੋੜ。

ਸੁਝਾਅ:ਮੂਲ ਰੂਪ ਵਿੱਚ،ਲਿੰਕ ਅਤੇ ਚਿੱਤਰਾਂ ਲਿਆਉਣ ਵਾਲੇ ਹਨ ਅਤੇ draggable ਲੋੜ ਨਹੀਂ ਕਰਦੇ

ਟ੍ਰੈਕ ਕਰਨ ਦੇ ਵੱਖ-ਵੱਖ ਚੜ੍ਹਦੇ ਦੌਰਾਨ ਕਈ ਈਵੈਂਟ ਵਰਤੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਹੋ ਸਕਦੇ ਹਨ:

ਲਿਆਉਣ ਵਾਲੇ ਟੀਚੇ (ਸਰੋਤ ਇਲੈਕਟ੍ਰੌਨ) ਉੱਤੇ ਟੰਗ ਹੁੰਦੇ ਈਵੈਂਟ:

  • ondragstart - ਜਦੋਂ ਉਪਭੋਗਤਾ ਇਲੈਕਟ੍ਰੌਨ ਲਿਆਉਣ ਵਾਲਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਤਾਂ ਹੁੰਦਾ ਹੈ
  • ondrag - ਜਦੋਂ ਇਲੈਕਟ੍ਰੌਨ ਲਿਆਉਣ ਵਾਲਾ ਹੁੰਦਾ ਹੈ ਤਾਂ ਹੁੰਦਾ ਹੈ
  • ondragend - ਜਦੋਂ ਉਪਭੋਗਤਾ ਲਿਆਉਣ ਵਾਲਾ ਇਲੈਕਟ੍ਰੌਨ ਪੂਰਾ ਕਰਦਾ ਹੈ ਤਾਂ ਹੁੰਦਾ ਹੈ

ਸਥਾਨ ਨੂੰ ਪਾਸ ਕਰਨ ਵਾਲੇ ਈਵੈਂਟ ਉੱਤੇ ਟੰਗ ਹੁੰਦੇ ਹਨ:

  • ondragenter - ਜਦੋਂ ਲਿਆਉਣ ਵਾਲਾ ਇਲੈਕਟ੍ਰੌਨ ਸਥਾਨ ਵਿੱਚ ਇੰਦਰਾਸ਼ਟ੍ਰਿਤ ਹੁੰਦਾ ਹੈ ਤਾਂ ਹੁੰਦਾ ਹੈ
  • ondragover - ਜਦੋਂ ਲਿਆਉਣ ਵਾਲਾ ਇਲੈਕਟ੍ਰੌਨ ਸਥਾਨ ਵਿੱਚ ਹੈ ਤਾਂ ਹੁੰਦਾ ਹੈ
  • ondragleave - ਜਦੋਂ ਲਿਆਉਣ ਵਾਲਾ ਇਲੈਕਟ੍ਰੌਨ ਸਥਾਨ ਤੋਂ ਬਾਹਰ ਚਲਦਾ ਹੈ ਤਾਂ ਹੁੰਦਾ ਹੈ
  • ondrop - ਜਦੋਂ ਲਿਆਉਣ ਵਾਲਾ ਇਲੈਕਟ੍ਰੌਨ ਸਥਾਨ ਨੂੰ ਪਾਸ ਕਰਦਾ ਹੈ ਤਾਂ ਹੁੰਦਾ ਹੈ

ਟਿੱਪਣੀਆਂ:ਜਦੋਂ ਇਲੈਕਟ੍ਰੌਨ ਤੋਂ ਖਿੜਦਾ ਹੈ ਤਾਂ ondragover ਈਵੈਂਟ ਹਰ 350 ਮਿਲੀਸੈਕੰਡ ਵਿੱਚ ਟੰਗ ਹੁੰਦਾ ਹੈ。

ਉਦਾਹਰਣ

ਜਦੋਂ ਇਲੈਕਟ੍ਰੌਨ ਸਥਾਨ ਨੂੰ ਪਾਸ ਕਰਦਾ ਹੈ ਤਾਂ JavaScript ਚਲਾਉਣਾ:

<div ondragover="myFunction(event)"></div>

ਸਵੈ ਮੁੱਖ ਕਰੋ

ਪੰਨੇ ਦੇ ਨੀਚੇ ਹੋਰ TIY ਉਦਾਹਰਣ ਹਨ。

ਗਰੰਥ

HTML ਵਿੱਚ:

<element ondragover="myScript">

ਸਵੈ ਮੁੱਖ ਕਰੋ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ:

object.ondragover = function(){myScript};

ਸਵੈ ਮੁੱਖ ਕਰੋ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ，addEventListener() ਮੱਥਦਾ ਹੈ:

object.addEventListener("dragover", myScript);

ਸਵੈ ਮੁੱਖ ਕਰੋ

ਟਿੱਪਣੀਆਂ:ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਜਾਂ ਪੁਰਾਣੇ ਸਰੋਤ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ addEventListener() 方法。

技术细节

冒泡： 支持
可取消： 支持
事件类型： DragEvent
支持的 HTML 标签： 所有 HTML 元素
DOM 版本： Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
ondragover 4.0 9.0 3.5 6.0 12.0

更多实例

对所有可能的拖放事件的演示：

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData()方法设置被拖拽数据的数据类型和值
  event.dataTransfer.setData("Text", event.target.id);
  // 开始拖动 p 元素时输出一些文本
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // 更改可拖动元素的不透明度
  event.target.style.opacity = "0.4";
});
// 拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});
/* ----------------- ਪਾਠਾਂ ਉੱਤੇ ਟ੍ਰਿਗਰ ਹੋਣ ਵਾਲੇ ਈਵੈਂਟ ----------------- */
// ਟ੍ਰੈਕਡੇਬਲ p ਤੱਤ ਜਦੋਂ droptarget ਵਿੱਚ ਆਉਂਦਾ ਹੈ ਤਾਂ DIV ਦੀ ਬਾਰਡਰ ਸਟਾਈਲ ਬਦਲੋ
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// ਮੂਲ ਰੂਪ ਵਿੱਚ, ਕੋਈ ਹੋਰ ਤੱਤ ਵਿੱਚ ਪਾਠਾਂ ਵਿੱਚ ਪਾਇਆ ਜਾਣਾ ਨਹੀਂ ਸਕਦਾ। ਪਾਠਾਂ ਵਿੱਚ ਪਾਇਆ ਜਾਣ ਦੀ ਅਨੁਮਤੀ ਦੇਣ ਲਈ, ਅਸੀਂ ਤੱਤ ਦੀ ਮੂਲ ਪ੍ਰਕਿਰਿਆ ਰੋਕਣਾ ਪਵੇਗਾ
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// ਟ੍ਰੈਕਡੇਬਲ p ਤੱਤ ਜਦੋਂ droptarget ਤੋਂ ਬਾਹਰ ਜਾਂਦਾ ਹੈ ਤਾਂ DIV ਦੀ ਬਾਰਡਰ ਸਟਾਈਲ ਮੁੜ ਸੈਟ ਕਰੋ
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - ਬਰਾਉਜ਼ਰ ਨੂੰ ਡਾਟਾ ਦੀ ਮੂਲ ਪ੍ਰਕਿਰਿਆ ਰੋਕੋ (ਮੂਲ ਪਾਠਾਂ ਵਿੱਚ ਲਿੰਕ ਦੇ ਰੂਪ ਵਿੱਚ ਪਾਠਾਂ ਵਿੱਚ ਪਾਇਆ ਜਾਵੇ) */
ਆਉਟਪੁੱਟ ਟੈਕਸਟ ਦੀ ਰੰਗ ਅਤੇ 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>

ਸਵੈ ਮੁੱਖ ਕਰੋ

ਸਬੰਧਤ ਪੰਨੇ

HTML ਸਿੱਖਿਆ: HTML5 ਟ੍ਰੈਕਡ੍ਰਾਫ਼

HTML ਪੁਸਤਕਾਲ: HTML draggable ਪਰਾਮੀਤੀ

DOM ਈਵੈਂਟ DragEvent