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

کو ڈوکومنٹیشن کی تصویر کو چوراگرمی میں ڈرگ کریں

ਟ੍ਰੈਕ ਅਤੇ ਡਰਾਪ

ਟ੍ਰੈਕ ਅਤੇ ਡਰਾਪ (ਡ੍ਰੈਗ ਅਤੇ ਡਰਾਪ) ਬਹੁਤ ਸਾਰੇ ਹਨ ਜਿਨ੍ਹਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਕੁਝ ਨੂੰ ਕੱਢ ਕੇ ਇੱਕ ਵੱਖਰੇ ਸਥਾਨ 'ਤੇ ਲਿਆ ਜਾਂਦਾ ਹੈ。

ਟ੍ਰੈਕ ਅਤੇ ਡਰਾਪ ਐੱਚਟੀਐੱਮਐੱਲ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() کو بلاک کریں تاکہ اعداد شمار کا بروسر کا فرسٹ پریسیس کا طور پر کردار نہ کیا جائے (درگ ایونٹ کا فرسٹ پریسیس کا طور پر کردار لینک کے طور پر کیا جاتا ہے)
  • dataTransfer.getData() میتھاڈ کے ذریعہ درگ کئے گئے اعداد شمار حاصل کریں، اس میتھاڈ کو setData() میتھاڈ میں ایک طرح سے استعمال کیا جاتا ہے، جو setData() میتھاڈ میں استعمال کیا گیا ہو
  • درگ کئے گئے اعداد شمار درگ کئے گئے عنصر کا آئی ڈی (\
  • درگ کئے گئے عنصر کو رکھنے والے عنصر میں شامل کریں

بیشتر مثال

تصویر کو آؤٹڈرگ کرنا

دو <div> عناصر کے درمیان تصویر کو کس طرح ڈرگ کیا جائے:

کو ڈوکومنٹیشن کی تصویر کو چوراگرمی میں ڈرگ کریں

خود کا تجربہ کریں