ondragenter واقعیت

DOM واقعیتی DragEvent

ਕੋਰਸ ਸਿਫਾਰਸ਼

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

ਜਦੋਂ ਟ੍ਰੈਕਟੇਬਲ ਐਲੀਮੈਂਟ ਜਾਂ ਟੈਕਸਟ ਚੋਣ ਪਲੇਸਮੈਂਟ ਟਾਰਗੇਟ ਵਿੱਚ ਆਉਂਦੇ ਹਨ ਤਾਂ ondragenter ਈਵੈਂਟ ਹੁੰਦਾ ਹੈ。

ondragenter ਅਤੇ ondragleave ਈਵੈਂਟ ਉਪਯੋਗਕਰਤਾ ਨੂੰ ਇਹ ਪਤਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਕਿ ਕਿਸੇ ਟ੍ਰੈਕਟੇਬਲ ਐਲੀਮੈਂਟ ਨੂੰ ਪਲੇਸਮੈਂਟ ਟਾਰਗੇਟ ਵਿੱਚ ਆਉਣ ਜਾਂ ਬਾਹਰ ਜਾਣ ਵਾਲਾ ਹੈ।ਉਦਾਹਰਣ ਵਜੋਂ ਟ੍ਰੈਕਟੇਬਲ ਐਲੀਮੈਂਟ ਪਲੇਸਮੈਂਟ ਟਾਰਗੇਟ ਵਿੱਚ ਆਉਂਦੇ ਹੋਏ ਪਿੱਨਲ ਰੰਗ ਨੂੰ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹਨ ਅਤੇ ਪਿੱਨਲ ਬਾਹਰ ਜਾਣ ਦੇ ਬਾਅਦ ਰੰਗ ਹਟਾ ਸਕਦੇ ਹਨ。 HTML5 ڈرگ اورਟ੍ਰੈਕ ਅਤੇ ਡਰਾਗ ਹੈਲਪ

ਟਿੱਪਣੀਆਂ:ਜੇਕਰ ਤੁਸੀਂ ਐਲੀਮੈਂਟ ਨੂੰ ਟ੍ਰੈਕਟੇਬਲ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਵਿਸ਼ਵ ਹੈਲਪ ਵਾਲੇ HTML ਟੂਰ ਦੀ ਵਰਤੋਂ ਕਰੋ。 HTML5 draggable ਲੀਵਰ.

ਸੁਝਾਅ:ਮੂਲ ਰੂਪ ਵਿੱਚ ਲਿੰਕ ਅਤੇ ਚਿੱਤਰਾਂ ਟ੍ਰੈਕਟੇਬਲ ਹਨ ਅਤੇ draggable ਲੀਵਰ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੁੰਦੀ ਹੈ。

ਟ੍ਰੈਕ ਅਤੇ ਡਰਾਗ ਓਪਰੇਸ਼ਨ ਦੇ ਵੱਖ-ਵੱਖ ਪੜਾਵਾਂ 'ਤੇ ਕਈ ਈਵੈਂਟ ਵਰਤੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਹੋ ਸਕਦੇ ਹਨ:

ਟ੍ਰੈਕਟੇਬਲ ਟਾਰਗੇਟ (ਸੋਰਸ ਐਲੀਮੈਂਟ) 'ਤੇ ਟ੍ਰਿਗਰ ਹੋਣ ਵਾਲੇ ਈਵੈਂਟ:

  • ondragstart - ਜਦੋਂ ਉਪਯੋਗਕਰਤਾ ਐਲੀਮੈਂਟ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਦੀ ਸ਼ੁਰੂਆਤ ਕਰਦਾ ਹੈ ਤਾਂ
  • ondrag - ਜਦੋਂ ਐਲੀਮੈਂਟ ਟ੍ਰੈਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ
  • ondragend - ਜਦੋਂ ਉਪਯੋਗਕਰਤਾ ਟ੍ਰੈਕਟੇਬਲ ਐਲੀਮੈਂਟ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ ਤਾਂ

ਪਲੇਸਮੈਂਟ ਟਾਰਗੇਟ 'ਤੇ ਟ੍ਰਿਗਰ ਹੋਣ ਵਾਲੇ ਈਵੈਂਟ:

  • ondragenter - ਜਦੋਂ ਟ੍ਰੈਕਟੇਬਲ ਐਲੀਮੈਂਟ ਪਲੇਸਮੈਂਟ ਟਾਰਗੇਟ ਵਿੱਚ ਆਉਂਦਾ ਹੈ ਤਾਂ
  • ondragover - ਜਦੋਂ ਟ੍ਰੈਕਟੇਬਲ ਐਲੀਮੈਂਟ ਪਲੇਸਮੈਂਟ ਟਾਰਗੇਟ 'ਤੇ ਹੈ ਤਾਂ
  • ondragleave - ਜਦੋਂ ਟ੍ਰੈਕਟੇਬਲ ਐਲੀਮੈਂਟ ਪਲੇਸਮੈਂਟ ਟਾਰਗੇਟ ਤੋਂ ਬਾਹਰ ਚੱਲ ਜਾਂਦਾ ਹੈ ਤਾਂ
  • ondrop - ਜਦੋਂ ਟ੍ਰੈਕਟੇਬਲ ਐਲੀਮੈਂਟ ਪਲੇਸਮੈਂਟ ਟਾਰਗੇਟ 'ਤੇ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ ਤਾਂ

ਉਦਾਹਰਣ

ਜਦੋਂ ਟ੍ਰੈਕਟੇਬਲ ਐਲੀਮੈਂਟ ਪਲੇਸਮੈਂਟ ਟਾਰਗੇਟ ਵਿੱਚ ਆਉਂਦਾ ਹੈ ਤਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਚਲਾਉਣਾ:

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

ਆਪਣੇ ਤਹਿਤ ਕਰ ਦੇਖੋ

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

ਗਰੰਥਾ

HTML ਵਿੱਚ:

<element ondragenter="myScript">

ਆਪਣੇ ਤਹਿਤ ਕਰ ਦੇਖੋ

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

object.ondragenter = function(){myScript};

ਆਪਣੇ ਤਹਿਤ ਕਰ ਦੇਖੋ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ،addEventListener() ਮੈਥਡ ਦੀ ਵਰਤੋਂ:

object.addEventListener("dragenter", myScript);

ਆਪਣੇ ਤਹਿਤ ਕਰ ਦੇਖੋ

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

Technical Details

Bubble: Supported
Cancelable: Supported
Event type: DragEvent
Supported HTML tags: All HTML elements
DOM Version: Level 3 Events

Browser Support

The numbers in the table indicate the first browser version that fully supports the event.

Event Chrome IE Firefox Safari Opera
ondragenter 4.0 9.0 3.5 6.0 12.0

More examples

x0a ext{对所有可能的拖放事件的演示：}

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