ایچ تی ام ال5 ڈراگ اینڈ ڈرپ

ਕ੍ਰਿਪਸੀ ਵੱਲੋਂ CodeW3C.com ਚਿੱਤਰ ਨੂੰ ਚੌਕਟੀ ਵਿੱਚ ਖਿੜ੍ਹੋ

ਟ੍ਰੈਜਨ ਅਤੇ ਡਾਫਨ

ਟ੍ਰੈਜਨ ਅਤੇ ਡਾਫਨ (Drag and Drop) ਕਾਫੀ ਮਹੱਤਵਪੂਰਨ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ। ਇਹ ਮਿਤਾਵੇਗਾ ਕਿ ਤੁਸੀਂ ਕੋਈ ਚੀਜ਼ ਕੈਸ਼ੇ ਕਰਕੇ ਵੱਖ ਸਥਾਨ 'ਤੇ ਲਿਆਉਂਦੇ ਹੋ ਸਕਦੇ ਹੋ।

ਟ੍ਰੈਜਨ ਅਤੇ ਡਾਫਨ ਐੱਚਟੀਐੱਮਐੱਲ5 ਸਟੈਂਡਰਡ ਦਾ ਹਿੱਸਾ ਹੈ: ਕੋਈ ਵੀ ਅੰਬਰ ਟ੍ਰੈਜਨ ਕਰਨ ਵਾਲਾ ਹੁੰਦਾ ਹੈ。

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਸਮਰਥਤ ਟ੍ਰੈਜਨ ਅਤੇ ਡਾਫਨ ਲਈ ਪਹਿਲੇ ਸਮਰਥਤ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਖਿਆ ਸ਼ਾਮਲ ਹੈ:

API
ਟ੍ਰੈਜਨ ਅਤੇ ਡਾਫਨ 4.0 9.0 3.5 6.0 12.0

HTML ਟ੍ਰੈਜਨ ਅਤੇ ਡਾਫਨ ਉਦਾਹਰਣ

ਹੇਠ ਦਿੱਤਾ ਹੈ ਟ੍ਰੈਜਨ ਅਤੇ ਡਾਫਨ ਦਾ ਸਰਲ ਉਦਾਹਰਣ:

ਉਦਾਹਰਣ

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

ਸਵੈ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਇਹ ਕੁਝ ਵੱਧ ਜਿਆਦਾ ਜਿਆਦਾ ਜਾਂਦਾ ਹੋ ਸਕਦਾ ਹੈ, ਲੇਕਿਨ ਆਓ ਅਸੀਂ ਟ੍ਰੈਜਨ ਅਤੇ ਡਾਫਨ ਈਵੈਂਟਾਂ ਦੇ ਸਾਰੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਨੂੰ ਜਾਣੂ ਕਰੀਏ。

ਅੰਬਰ ਨੂੰ ਟ੍ਰੈਜਨ ਕਰਨ ਵਾਲਾ ਬਣਾਓ

ਪਹਿਲਾਂ: ਇੱਕ ਅੰਬਰ ਨੂੰ ਟ੍ਰੈਜਨ ਕਰਨ ਵਾਲਾ ਬਣਾਉਣ ਲਈ, draggable ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ true ਸੈਟ ਕਰੋ:

<img draggable="true">

ਟ੍ਰੈਜਨ ਅਤੇ ਡਾਫਨ ਸਮੱਗਰੀ - ondragstart ਅਤੇ setData()

ਤਦ, ਇਹ ਮਿਤਾਵੇਗਾ ਕਿ ਜਦੋਂ ਅੰਬਰ ਟ੍ਰੈਜਨ ਕੀਤਾ ਜਾਵੇ, ਤਾਂ ਕੀ ਹੋਵੇਗਾ。

ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ, ondragstart ਵਿਸ਼ੇਸ਼ਤਾ ਨੇ drag(event) ਫੰਕਸਨ ਚਾਲੂ ਕੀਤਾ, ਜੋ ਕਿ ਕੀ ਟ੍ਰੈਜਨ ਕੀਤੀ ਜਾਵੇ ਮਿਤਾਵੇਗੀ。

dataTransfer.setData() ਮੱਥਦਾ ਤੰਤਰ ਸਟੋਰ ਦਾ ਡਾਟਾ ਟਾਈਪ ਅਤੇ ਮੁੱਲ ਸੈਟ ਕਰਦਾ ਹੈ:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ, ਡਾਟਾ ਟਾਈਪ 'text' ਹੈ ਅਤੇ ਮੁੱਲ ਇਸ ਸਰੋਤਰੰਜਿਤ ਅੰਬਰ ਦਾ id ('drag1') ਹੈ。

ਕਿਥੇ ਖਿੜ੍ਹੇ - ondragover

ondragover ਈਵੈਂਟ ਇਹ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ ਕਿ ਖਿੜ੍ਹੇ ਗਏ ਡਾਟਾ ਕਿਥੇ ਪਾਠਾਂ ਵਿੱਚ ਪਾਏ ਜਾ ਸਕਦੇ ਹਨ

ਮੂਲਤਬੀ ਤੌਰ 'ਤੇ, ਡਾਟਾ/ਇਲੈਕਟ੍ਰੌਨ ਕਿਸੇ ਹੋਰ ਇਲੈਕਟ੍ਰੌਨ ਵਿੱਚ ਪਾਠਾਂ ਵਿੱਚ ਨਹੀਂ ਪਾਏ ਜਾ ਸਕਦੇ।ਟ੍ਰੈਕ ਵਿੱਚ ਪਾਠਾਂ ਲਈ, ਅਸੀਂ ਇਲੈਕਟ੍ਰੌਨ ਦੀ ਇਸ ਮੂਲਤਬੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਰੋਕਣਾ ਚਾਹੀਦੇ ਹਾਂ

ਇਹ ਕੰਮ ondragover ਈਵੈਂਟ ਦੇ event.preventDefault() ਮੇਥਡ ਦੁਆਰਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

event.preventDefault()

ਪਾਠਾਂ ਵਿੱਚ ਪਾਠਾਂ - ondrop

ਖਿੜ੍ਹੇ ਗਏ ਡਾਟਾ ਨੂੰ ਰਿਹਾਇਸ਼ ਦੇਣ ਦੇ ਸਮੇਂ drop ਈਵੈਂਟ ਹੁੰਦਾ ਹੈ

ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ ondrop ਅਤੇਵਾਰ ਇੱਕ ਫੰਕਸ਼ਨ ਆਉਂਦਾ ਹੈ, drop(event)：

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

ਕੋਡ ਵਿਆਖਿਆ:

  • preventDefault() ਬੁਲਾਉਣ ਨਾਲ ਡਾਟਾ ਦੀ ਬਰਾਉਜ਼ਰ ਮੂਲਤਬੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਰੋਕੋ (drop ਈਵੈਂਟ ਦੀ ਮੂਲਤਬੀ ਪ੍ਰਕਿਰਿਆ ਲਿੰਕ ਵਜੋਂ ਖੋਲ੍ਹਣਾ ਹੈ)
  • dataTransfer.getData() ਮੇਥਡ ਰਾਹੀਂ ਖਿੜ੍ਹੇ ਗਏ ਡਾਟਾ ਮਿਲਦਾ ਹੈ।ਇਹ ਮੇਥਡ setData() ਮੇਥਡ ਵਿੱਚ ਸਮਾਨ ਤਰ੍ਹਾਂ ਦਾ ਕੋਈ ਵੀ ਡਾਟਾ ਵਾਪਸ ਦੇਣ ਵਾਲਾ ਹੈ
  • ਖਿੜ੍ਹੇ ਗਏ ਡਾਟਾ ਖਿੜ੍ਹੇ ਗਏ ਇਲੈਕਟ੍ਰੌਨ ਦਾ id (\
  • ਖਿੜ੍ਹੇ ਗਏ ਇਲੈਕਟ੍ਰੌਨ ਨੂੰ ਪਾਠਾਂ ਵਿੱਚ ਜੋੜੋ

ਹੋਰ ਉਦਾਹਰਨ

ਬਦਲਦੇ ਹੋਏ ਚਿੱਤਰ ਖਿੜ੍ਹੇ

ਦੋ <div> ਇਲੈਕਟ੍ਰੌਨ ਵਿੱਚ ਚਿੱਤਰ ਨੂੰ ਕਿਵੇਂ ਬਦਲਦੇ ਹੋਏ ਖਿੜ੍ਹੇ:

ਕ੍ਰਿਪਸੀ ਵੱਲੋਂ CodeW3C.com ਚਿੱਤਰ ਨੂੰ ਚੌਕਟੀ ਵਿੱਚ ਖਿੜ੍ਹੋ

ਸਵੈ ਕੋਸ਼ਿਸ਼ ਕਰੋ