History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 3: DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਅਤੇ ਕਲੋਜ਼ਰ

ਸਕੈਚਨੋਟ ਟੋਮੋਮੀ ਇਮੁਰਾ ਵੱਲੋਂ

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

ਪਰਿਚਯ

DOM, ਜਾਂ "ਡਾਕੂਮੈਂਟ ਆਬਜੈਕਟ ਮਾਡਲ", ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨਾ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦਾ ਇੱਕ ਮੁੱਖ ਪਹਲੂ ਹੈ। MDN ਦੇ ਅਨੁਸਾਰ, "ਡਾਕੂਮੈਂਟ ਆਬਜੈਕਟ ਮਾਡਲ (DOM) ਵੈੱਬ 'ਤੇ ਇੱਕ ਡਾਕੂਮੈਂਟ ਦੀ ਬਣਤਰ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਬਣਾਉਣ ਵਾਲੇ ਆਬਜੈਕਟਾਂ ਦੀ ਡਾਟਾ ਪ੍ਰਸਤੁਤੀ ਹੈ।" ਵੈੱਬ 'ਤੇ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਦੇ ਚੁਣੌਤੀਆਂ ਅਕਸਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਰੇਮਵਰਕਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਪਿੱਛੇ ਕਾਰਨ ਰਹੀਆਂ ਹਨ, ਪਰ ਅਸੀਂ ਇਸਨੂੰ ਸਿਰਫ ਵੈਨਿਲਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਸੰਭਾਲਾਂਗੇ!

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇਸ ਪਾਠ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ ਦਾ ਵਿਚਾਰ ਪੇਸ਼ ਕੀਤਾ ਜਾਵੇਗਾ, ਜਿਸਨੂੰ ਤੁਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਵਜੋਂ ਸੋਚ ਸਕਦੇ ਹੋ ਜੋ ਦੂਜੇ ਫੰਕਸ਼ਨ ਦੁਆਰਾ ਘੇਰਿਆ ਗਿਆ ਹੈ ਤਾਂ ਜੋ ਅੰਦਰੂਨੀ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਹੋਵੇ।

ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ ਇੱਕ ਵਿਆਪਕ ਅਤੇ ਜਟਿਲ ਵਿਸ਼ਾ ਹੈ। ਇਸ ਪਾਠ ਵਿੱਚ ਸਿਰਫ ਬੁਨਿਆਦੀ ਵਿਚਾਰ ਨੂੰ ਛੂਹਿਆ ਗਿਆ ਹੈ ਕਿ ਇਸ ਟੈਰੀਰੀਅਮ ਦੇ ਕੋਡ ਵਿੱਚ ਤੁਹਾਨੂੰ ਇੱਕ ਕਲੋਜ਼ਰ ਮਿਲੇਗਾ: ਇੱਕ ਅੰਦਰੂਨੀ ਫੰਕਸ਼ਨ ਅਤੇ ਇੱਕ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਜੋ ਇਸ ਤਰੀਕੇ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਕਿ ਅੰਦਰੂਨੀ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਹੋਵੇ। ਇਸਦੇ ਕੰਮ ਕਰਨ ਦੇ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਕਿਰਪਾ ਕਰਕੇ ਵਿਆਪਕ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ।

ਅਸੀਂ DOM ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਲਈ ਇੱਕ ਕਲੋਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ।

DOM ਨੂੰ ਇੱਕ ਦਰੱਖਤ ਵਜੋਂ ਸੋਚੋ, ਜੋ ਇੱਕ ਵੈੱਬ ਪੇਜ ਡਾਕੂਮੈਂਟ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੇ ਸਾਰੇ ਤਰੀਕੇ ਦਰਸਾਉਂਦਾ ਹੈ। ਵੱਖ-ਵੱਖ APIs (ਐਪਲੀਕੇਸ਼ਨ ਪ੍ਰੋਗਰਾਮ ਇੰਟਰਫੇਸ) ਲਿਖੀਆਂ ਗਈਆਂ ਹਨ ਤਾਂ ਜੋ ਪ੍ਰੋਗਰਾਮਰ, ਆਪਣੇ ਪਸੰਦੀਦਾ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, DOM ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਣ ਅਤੇ ਇਸਨੂੰ ਸੋਧ ਸਕਣ, ਬਦਲ ਸਕਣ, ਦੁਬਾਰਾ ਵਿਵਸਥਿਤ ਕਰ ਸਕਣ, ਅਤੇ ਹੋਰ ਤਰੀਕੇ ਨਾਲ ਇਸਨੂੰ ਸੰਭਾਲ ਸਕਣ।

DOM ਅਤੇ ਇਸਨੂੰ ਰਿਫਰੈਂਸ ਕਰਨ ਵਾਲੇ HTML ਮਾਰਕਅੱਪ ਦੀ ਇੱਕ ਪ੍ਰਸਤੁਤੀ। ਓਲਫਾ ਨਸਰਾਊਈ ਵੱਲੋਂ

ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਆਪਣਾ ਇੰਟਰਐਕਟਿਵ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਪੂਰਾ ਕਰਾਂਗੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬਣਾਕੇ ਜੋ ਯੂਜ਼ਰ ਨੂੰ ਪੇਜ 'ਤੇ ਪੌਦਿਆਂ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਵੇਗਾ।

ਪੂਰਵ ਸ਼ਰਤ

ਤੁਹਾਡੇ ਕੋਲ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਲਈ HTML ਅਤੇ CSS ਬਣੇ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ ਤੁਸੀਂ ਪੌਦਿਆਂ ਨੂੰ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਖਿੱਚ ਕੇ ਲਿਜਾਣ ਅਤੇ ਬਾਹਰ ਕੱਢਣ ਦੇ ਯੋਗ ਹੋਵੋਗੇ।

ਕੰਮ

ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਫੋਲਡਰ ਵਿੱਚ, ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ ਜਿਸਦਾ ਨਾਮ script.js ਰੱਖੋ। ਇਸ ਫਾਈਲ ਨੂੰ <head> ਸੈਕਸ਼ਨ ਵਿੱਚ ਇੰਪੋਰਟ ਕਰੋ:

	<script src="./script.js" defer></script>

ਨੋਟ: ਇੱਕ ਬਾਹਰੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਈਲ ਨੂੰ HTML ਫਾਈਲ ਵਿੱਚ ਇੰਪੋਰਟ ਕਰਦੇ ਸਮੇਂ defer ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਿਰਫ HTML ਫਾਈਲ ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਹੀ ਚੱਲੇ। ਤੁਸੀਂ async ਐਟ੍ਰਿਬਿਊਟ ਦੀ ਵੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜੋ ਸਕ੍ਰਿਪਟ ਨੂੰ HTML ਫਾਈਲ ਦੇ ਪਾਰਸ ਹੋਣ ਦੇ ਦੌਰਾਨ ਚਲਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਪਰ ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਡਰੈਗ ਕਰਨ ਵਾਲੇ HTML ਐਲਿਮੈਂਟ ਪੂਰੀ ਤਰ੍ਹਾਂ ਉਪਲਬਧ ਹੋਣ।

DOM ਐਲਿਮੈਂਟਸ

ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਤੁਹਾਨੂੰ DOM ਵਿੱਚ ਉਹ ਐਲਿਮੈਂਟਸ ਨੂੰ ਰਿਫਰੈਂਸ ਕਰਨਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਸੀਂ ਮੈਨਿਪੂਲੇਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਇਹ 14 ਪੌਦੇ ਹਨ ਜੋ ਇਸ ਸਮੇਂ ਸਾਈਡ ਬਾਰ ਵਿੱਚ ਉਪਲਬਧ ਹਨ।

ਕੰਮ

dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3'));
dragElement(document.getElementById('plant4'));
dragElement(document.getElementById('plant5'));
dragElement(document.getElementById('plant6'));
dragElement(document.getElementById('plant7'));
dragElement(document.getElementById('plant8'));
dragElement(document.getElementById('plant9'));
dragElement(document.getElementById('plant10'));
dragElement(document.getElementById('plant11'));
dragElement(document.getElementById('plant12'));
dragElement(document.getElementById('plant13'));
dragElement(document.getElementById('plant14'));

ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ? ਤੁਸੀਂ ਡਾਕੂਮੈਂਟ ਨੂੰ ਰਿਫਰੈਂਸ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਇਸਦੇ DOM ਵਿੱਚ ਇੱਕ ਖਾਸ Id ਵਾਲੇ ਐਲਿਮੈਂਟ ਨੂੰ ਲੱਭ ਰਹੇ ਹੋ। ਯਾਦ ਕਰੋ ਪਹਿਲੇ ਪਾਠ ਵਿੱਚ HTML 'ਤੇ ਤੁਸੀਂ ਹਰ ਪੌਦੇ ਦੀ ਤਸਵੀਰ ਨੂੰ ਵਿਅਕਤੀਗਤ Id ਦਿੱਤੀ ਸੀ (id="plant1")। ਹੁਣ ਤੁਸੀਂ ਉਸ ਮਿਹਨਤ ਦਾ ਫਾਇਦਾ ਲੈ ਰਹੇ ਹੋ। ਹਰ ਐਲਿਮੈਂਟ ਦੀ ਪਛਾਣ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਉਸ ਆਈਟਮ ਨੂੰ ਇੱਕ ਫੰਕਸ਼ਨ dragElement ਨੂੰ ਪਾਸ ਕਰਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਕੁਝ ਸਮੇਂ ਵਿੱਚ ਬਣਾਉਣ ਵਾਲੇ ਹੋ। ਇਸ ਤਰ੍ਹਾਂ, HTML ਵਿੱਚ ਐਲਿਮੈਂਟ ਹੁਣ ਡਰੈਗ-ਇਨੇਬਲਡ ਹੋ ਜਾਂਦਾ ਹੈ, ਜਾਂ ਜਲਦੀ ਹੋਵੇਗਾ।

✅ ਅਸੀਂ ਐਲਿਮੈਂਟਸ ਨੂੰ Id ਨਾਲ ਕਿਉਂ ਰਿਫਰੈਂਸ ਕਰਦੇ ਹਾਂ? CSS ਕਲਾਸ ਨਾਲ ਕਿਉਂ ਨਹੀਂ? ਇਸ ਸਵਾਲ ਦਾ ਜਵਾਬ ਦੇਣ ਲਈ ਤੁਸੀਂ CSS 'ਤੇ ਪਿਛਲੇ ਪਾਠ ਨੂੰ ਰਿਫਰੈਂਸ ਕਰ ਸਕਦੇ ਹੋ।

ਕਲੋਜ਼ਰ

ਹੁਣ ਤੁਸੀਂ dragElement ਕਲੋਜ਼ਰ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੋ, ਜੋ ਇੱਕ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਇੱਕ ਅੰਦਰੂਨੀ ਫੰਕਸ਼ਨ ਜਾਂ ਫੰਕਸ਼ਨਸ ਨੂੰ ਘੇਰਦਾ ਹੈ (ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਅਸੀਂ ਤਿੰਨ ਬਣਾਵਾਂਗੇ)।

ਕਲੋਜ਼ਰ ਉਸ ਸਮੇਂ ਲਾਭਦਾਇਕ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਇੱਕ ਜਾਂ ਵੱਧ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:

function displayCandy(){
	let candy = ['jellybeans'];
	function addCandy(candyType) {
		candy.push(candyType)
	}
	addCandy('gumdrops');
}
displayCandy();
console.log(candy)

ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, displayCandy ਫੰਕਸ਼ਨ ਇੱਕ ਅਜਿਹੇ ਫੰਕਸ਼ਨ ਨੂੰ ਘੇਰਦਾ ਹੈ ਜੋ ਇੱਕ ਮੌਜੂਦਾ ਐਰੇ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਕੈਂਡੀ ਦੀ ਕਿਸਮ ਪੁਸ਼ ਕਰਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਇਸ ਕੋਡ ਨੂੰ ਚਲਾਉਂਦੇ ਹੋ, ਤਾਂ candy ਐਰੇ ਅਣਪਛਾਤਾ ਹੋਵੇਗਾ, ਕਿਉਂਕਿ ਇਹ ਇੱਕ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਹੈ (ਕਲੋਜ਼ਰ ਲਈ ਸਥਾਨਕ)।

✅ ਤੁਸੀਂ candy ਐਰੇ ਨੂੰ ਕਿਵੇਂ ਪਹੁੰਚਯੋਗ ਬਣਾ ਸਕਦੇ ਹੋ? ਇਸਨੂੰ ਕਲੋਜ਼ਰ ਤੋਂ ਬਾਹਰ ਲਿਜਾਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਇਸ ਤਰੀਕੇ ਨਾਲ, ਐਰੇ ਗਲੋਬਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਸਿਰਫ ਕਲੋਜ਼ਰ ਦੇ ਸਥਾਨਕ ਸਕੋਪ ਤੱਕ ਸੀਮਿਤ ਰਹਿਣ ਦੀ ਬਜਾਏ।

ਕੰਮ

script.js ਵਿੱਚ ਐਲਿਮੈਂਟ ਡਿਕਲੇਰੇਸ਼ਨ ਦੇ ਹੇਠਾਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ:

function dragElement(terrariumElement) {
	//set 4 positions for positioning on the screen
	let pos1 = 0,
		pos2 = 0,
		pos3 = 0,
		pos4 = 0;
	terrariumElement.onpointerdown = pointerDrag;
}

dragElement ਆਪਣੇ terrariumElement ਆਬਜੈਕਟ ਨੂੰ ਸਕ੍ਰਿਪਟ ਦੇ ਸਿਖਰ 'ਤੇ ਕੀਤੀਆਂ ਡਿਕਲੇਰੇਸ਼ਨ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਫਿਰ, ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਵਿੱਚ ਪਾਸ ਕੀਤੇ ਗਏ ਆਬਜੈਕਟ ਲਈ ਕੁਝ ਸਥਾਨਕ ਸਥਿਤੀਆਂ ਨੂੰ 0 'ਤੇ ਸੈਟ ਕਰਦੇ ਹੋ। ਇਹ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਹਨ ਜੋ ਹਰ ਐਲਿਮੈਂਟ ਲਈ ਮੈਨਿਪੂਲੇਟ ਕੀਤੇ ਜਾਣਗੇ ਜਦੋਂ ਤੁਸੀਂ ਕਲੋਜ਼ਰ ਦੇ ਅੰਦਰ ਡਰੈਗ ਅਤੇ ਡਰੌਪ ਫੰਕਸ਼ਨਲਿਟੀ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ। ਟੈਰੀਰੀਅਮ ਨੂੰ ਇਨ੍ਹਾਂ ਡਰੈਗ ਕੀਤੇ ਗਏ ਐਲਿਮੈਂਟਸ ਦੁਆਰਾ ਭਰਿਆ ਜਾਵੇਗਾ, ਇਸ ਲਈ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਇਹ ਟਰੈਕ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਕਿ ਇਹ ਕਿੱਥੇ ਰੱਖੇ ਗਏ ਹਨ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕੀਤਾ ਗਿਆ terrariumElement ਇੱਕ pointerdown ਇਵੈਂਟ ਨੂੰ ਅਸਾਈਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਵੈੱਬ APIs ਦਾ ਹਿੱਸਾ ਹੈ ਜੋ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਹੈ। onpointerdown ਉਸ ਸਮੇਂ ਚਲਦਾ ਹੈ ਜਦੋਂ ਕੋਈ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ, ਜਾਂ ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਜਦੋਂ ਇੱਕ ਡਰੈਗ ਕਰਨ ਯੋਗ ਐਲਿਮੈਂਟ ਨੂੰ ਛੂਹਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਇਵੈਂਟ ਹੈਂਡਲਰ ਦੋਨੋਂ ਵੈੱਬ ਅਤੇ ਮੋਬਾਈਲ ਬ੍ਰਾਊਜ਼ਰ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਕੁਝ ਛੋਟਾਂ ਦੇ ਨਾਲ।

✅ ਇਵੈਂਟ ਹੈਂਡਲਰ onclick ਦੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਸਪੋਰਟ ਹੈ; ਤੁਸੀਂ ਇਸਨੂੰ ਇੱਥੇ ਕਿਉਂ ਨਹੀਂ ਵਰਤਦੇ? ਉਸ ਖਾਸ ਸਕ੍ਰੀਨ ਇੰਟਰਐਕਸ਼ਨ ਬਾਰੇ ਸੋਚੋ ਜੋ ਤੁਸੀਂ ਇੱਥੇ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ।

ਪੌਇੰਟਰਡਰੈਗ ਫੰਕਸ਼ਨ

terrariumElement ਹੁਣ ਡਰੈਗ ਕਰਨ ਲਈ ਤਿਆਰ ਹੈ; ਜਦੋਂ onpointerdown ਇਵੈਂਟ ਚਲਦਾ ਹੈ, ਤਾਂ pointerDrag ਫੰਕਸ਼ਨ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਇਸ ਲਾਈਨ ਦੇ ਹੇਠਾਂ ਇਹ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ: terrariumElement.onpointerdown = pointerDrag;:

ਕੰਮ

function pointerDrag(e) {
	e.preventDefault();
	console.log(e);
	pos3 = e.clientX;
	pos4 = e.clientY;
}

ਕਈ ਚੀਜ਼ਾਂ ਹੁੰਦੀਆਂ ਹਨ। ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਸੀਂ e.preventDefault(); ਦੀ ਵਰਤੋਂ ਕਰਕੇ pointerdown 'ਤੇ ਆਮ ਤੌਰ 'ਤੇ ਹੋਣ ਵਾਲੇ ਡਿਫਾਲਟ ਇਵੈਂਟਸ ਨੂੰ ਰੋਕਦੇ ਹੋ। ਇਸ ਤਰੀਕੇ ਨਾਲ ਤੁਹਾਡੇ ਕੋਲ ਇੰਟਰਫੇਸ ਦੇ ਵਿਹਾਰ 'ਤੇ ਵੱਧ ਨਿਯੰਤਰਣ ਹੁੰਦਾ ਹੈ।

ਜਦੋਂ ਤੁਸੀਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਕ੍ਰਿਪਟ ਫਾਈਲ ਬਣਾਉਂਦੇ ਹੋ, ਇਸ ਲਾਈਨ 'ਤੇ ਵਾਪਸ ਆਓ ਅਤੇ ਇਸਨੂੰ e.preventDefault() ਤੋਂ ਬਿਨਾਂ ਅਜ਼ਮਾਓ - ਕੀ ਹੁੰਦਾ ਹੈ?

ਦੂਜਾ, index.html ਨੂੰ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਵਿੱਚ ਖੋਲ੍ਹੋ, ਅਤੇ ਇੰਟਰਫੇਸ ਦੀ ਜਾਂਚ ਕਰੋ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਪੌਦੇ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ 'e' ਇਵੈਂਟ ਕਿਵੇਂ ਕੈਪਚਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਵੈਂਟ ਵਿੱਚ ਖੋਜ ਕਰੋ ਤਾਂ ਜੋ ਤੁਸੀਂ ਦੇਖ ਸਕੋ ਕਿ ਇੱਕ pointerdown ਇਵੈਂਟ ਦੁਆਰਾ ਕਿੰਨੀ ਜਾਣਕਾਰੀ ਇਕੱਠੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ!

ਅਗਲਾ, ਧਿਆਨ ਦਿਓ ਕਿ ਸਥਾਨਕ ਵੈਰੀਏਬਲ pos3 ਅਤੇ pos4 ਨੂੰ e.clientX 'ਤੇ ਕਿਵੇਂ ਸੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਤੁਸੀਂ ਇੰਸਪੈਕਸ਼ਨ ਪੈਨ ਵਿੱਚ e ਮੁੱਲਾਂ ਨੂੰ ਲੱਭ ਸਕਦੇ ਹੋ। ਇਹ ਮੁੱਲ ਪੌਦੇ ਦੇ x ਅਤੇ y ਕੋਆਰਡੀਨੇਟਸ ਨੂੰ ਕੈਪਚਰ ਕਰਦੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਇਸ 'ਤੇ ਕਲਿੱਕ ਜਾਂ ਟਚ ਕਰਦੇ ਹੋ। ਤੁਸੀਂ ਪੌਦਿਆਂ ਦੇ ਵਿਹਾਰ 'ਤੇ ਵਧੀਆ ਨਿਯੰਤਰਣ ਦੀ ਲੋੜ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਕਲਿੱਕ ਅਤੇ ਡਰੈਗ ਕਰਦੇ ਹੋ, ਇਸ ਲਈ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਦੇ ਕੋਆਰਡੀਨੇਟਸ ਨੂੰ ਟਰੈਕ ਕਰਦੇ ਹੋ।

✅ ਕੀ ਇਹ ਹੋਰ ਸਪਸ਼ਟ ਹੋ ਰਿਹਾ ਹੈ ਕਿ ਇਹ ਸਾਰਾ ਐਪ ਇੱਕ ਵੱਡੇ ਕਲੋਜ਼ਰ ਨਾਲ ਕਿਉਂ ਬਣਾਇਆ ਗਿਆ ਹੈ? ਜੇ ਇਹ ਨਾ ਹੁੰਦਾ, ਤਾਂ ਤੁਸੀਂ 14 ਡਰੈਗ ਕਰਨ ਯੋਗ ਪੌਦਿਆਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਲਈ ਸਕੋਪ ਕਿਵੇਂ ਬਣਾਈ ਰੱਖਦੇ?

ਸ਼ੁਰੂਆਤੀ ਫੰਕਸ਼ਨ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ pos4 = e.clientY ਦੇ ਹੇਠਾਂ ਦੋ ਹੋਰ ਪੌਇੰਟਰ ਇਵੈਂਟ ਮੈਨਿਪੂਲੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:

document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;

ਹੁਣ ਤੁਸੀਂ ਦਰਸਾ ਰਹੇ ਹੋ ਕਿ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਪੌਇੰਟਰ ਦੇ ਨਾਲ ਖਿੱਚਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ, ਅਤੇ ਡਰੈਗਿੰਗ ਜੈਸਚਰ ਨੂੰ ਰੋਕਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਡੀਸਿਲੈਕਟ ਕਰਦੇ ਹੋ। onpointermove ਅਤੇ onpointerup ਸਾਰੇ ਇੱਕੋ API ਦਾ ਹਿੱਸਾ ਹਨ ਜਿਵੇਂ onpointerdown। ਇੰਟਰਫੇਸ ਹੁਣ ਗਲਤੀਆਂ ਸੁੱਟੇਗਾ ਕਿਉਂਕਿ ਤੁਸੀਂ ਹਾਲੇ elementDrag ਅਤੇ stopElementDrag ਫੰਕਸ਼ਨਸ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਕੀਤਾ ਹੈ, ਇਸ ਲਈ ਹੁਣ ਉਹ ਬਣਾਓ।

`elementDrag` ਅਤੇ `stopElementDrag` ਫੰਕਸ਼ਨਸ

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

ਕੰਮ

pointerDrag ਦੇ ਬੰਦ ਕਰਲੀ ਬ੍ਰੈਕਟ ਦੇ ਤੁਰੰਤ ਬਾਅਦ elementDrag ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:

function elementDrag(e) {
	pos1 = pos3 - e.clientX;
	pos2 = pos4 - e.clientY;
	pos3 = e.clientX;
	pos4 = e.clientY;
	console.log(pos1, pos2, pos3, pos4);
	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
}

ਇਸ ਫੰਕਸ਼ਨ ਵਿੱਚ, ਤੁਸੀਂ ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀਆਂ 1-4 ਨੂੰ ਬਹੁਤ ਸੋਧਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਵਿੱਚ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਵਜੋਂ ਸੈਟ ਕੀਤੀਆਂ ਸਨ। ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ?

ਜਦੋਂ ਤੁਸੀਂ ਖਿੱਚਦੇ ਹੋ, ਤੁਸੀਂ pos1 ਨੂੰ ਦੁਬਾਰਾ ਅਸਾਈਨ ਕਰਦੇ ਹੋ ਇਸਨੂੰ pos3 ਦੇ ਬਰਾਬਰ ਬਣਾਕੇ (ਜਿਸਨੂੰ ਤੁਸੀਂ ਪਹਿਲਾਂ e.clientX ਵਜੋਂ ਸੈਟ ਕੀਤਾ ਸੀ) ਮਾਈਨਸ ਮੌਜੂਦਾ e.clientX ਮੁੱਲ। ਤੁਸੀਂ pos2 ਨਾਲ ਵੀ ਇੱਕੋ ਜਿਹੀ ਕਾਰਵਾਈ ਕਰਦੇ ਹੋ। ਫਿਰ

ਅਸਵੀਕਰਤਾ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।