22 KiB

Raw Blame History

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

ਸਕੈਚਨੋਟ ਟੋਮੋਮੀ ਇਮੁਰਾ ਦੁਆਰਾ

ਪੂਰਵ-ਵਿਆਖਿਆ ਪ੍ਰਸ਼ਨੋਤਰੀ

ਪਰਿਚਯ

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

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

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

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

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

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

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

ਪੂਰਵ ਸ਼ਰਤ

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

ਕੰਮ

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

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

ਨੋਟ: HTML ਫਾਈਲ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਦੇ ਬਾਅਦ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਚਲਾਉਣ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ HTML ਫਾਈਲ ਵਿੱਚ ਬਾਹਰੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਈਲ ਨੂੰ ਇੰਪੋਰਟ ਕਰਦੇ ਸਮੇਂ defer ਦੀ ਵਰਤੋਂ ਕਰੋ। ਤੁਸੀਂ 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 ਦੇ ਪਹਿਲੇ ਪਾਠ ਵਿੱਚ ਤੁਸੀਂ ਹਰ ਪੌਦੇ ਦੀ ਚਿੱਤਰ ਨੂੰ ਵਿਅਕਤੀਗਤ Ids ਦਿੱਤੇ ਸਨ (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 ਇਵੈਂਟ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ web 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' ਇਵੈਂਟ ਕਿਵੇਂ ਕੈਪਚਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਵੈਂਟ ਵਿੱਚ ਖੋਜ ਕਰੋ ਕਿ ਇੱਕ ਪੌਇੰਟਰ ਡਾਊਨ ਇਵੈਂਟ ਦੁਆਰਾ ਕਿੰਨੀ ਜਾਣਕਾਰੀ ਇਕੱਠੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ!

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

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

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

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

ਹੁਣ ਤੁਸੀਂ ਦਰਸਾ ਰਹੇ ਹੋ ਕਿ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਪੌਇੰਟਰ ਦੇ ਨਾਲ ਖਿੱਚਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ, ਅਤੇ ਖਿੱਚਣ ਦੀ ਜੇਸਚਰ ਨੂੰ ਰੋਕਣ ਲਈ ਜਦੋਂ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਡੀਸੈਲੇਕਟ ਕਰਦੇ ਹੋ। onpointermove ਅਤੇ onpointerup onpointerdown ਦੇ ਸਮੇ API ਦੇ ਹਿੱਸੇ ਹਨ। ਇੰਟਰਫੇਸ ਹੁਣ ਗਲਤੀਆਂ ਸੁੱਟੇਗਾ ਕਿਉਂਕਿ ਤੁਸੀਂ ਅਜੇ ਤੱਕ 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 ਨਾਲ ਵੀ ਇਹੀ ਕਾਰਵਾਈ ਕਰਦੇ ਹੋ। ਫਿਰ, ਤੁਸੀਂ pos3 ਅਤੇ pos4 ਨੂੰ ਤੱਤ ਦੇ ਨਵੇਂ X ਅਤੇ Y ਕੋਆਰਡੀਨੇਟ 'ਤੇ ਦੁਬਾਰਾ ਸੈਟ ਕਰਦੇ ਹੋ। ਜਦੋਂ ਤੁਸੀਂ ਖਿੱਚਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਕਨਸੋਲ ਵਿੱਚ ਇਹ ਬਦਲਾਅ ਦੇਖ ਸਕਦੇ ਹੋ। ਫਿਰ, ਤੁਸੀਂ ਪੌਦੇ ਦੇ css ਸਟਾਈਲ ਨੂੰ ਮੈਨ

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

22 KiB Raw Blame History