Helenr
2022-11-11 11:02:03
我正在嘗試制作一個網頁,您可以在其中將三個圖像之一拖放到目標圖像上,并且根據拖放到目標上的圖像,用戶將被定向到不同的鏈接。例如,當用戶將ID為“drag 1”的圖像拖到目標圖像上時,他們將被定向到我網站上的網頁“portfolio-fiber”?;蛘?,如果用戶將ID為“drag 2”的圖像拖到目標圖像上,則被引導到網頁“portfolio-paint”;等等。到目前為止,我幾乎可以完成所有工作,但是當我拖動任何圖像時,它們都會將我引導到同一個網頁(“portfolio-fiber”)。我是編碼新手,因此,我將非常感謝您提供的有關如何使不同的可拖動圖像將用戶引導至不同鏈接的任何建議。以下是我到目前為止的腳本。<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)); if (data = "#drag 1"){ window.open('portfolio-fiber', '_self',false).click(); } else if (data = "#drag 2"){ window.open('portfolio-paint', '_self',false).click(); }else if (data = "#drag 3"){ window.open('portfolio-other', '_self',false).click(); }}</script>
1 回答

白板的微信
TA貢獻1883條經驗 獲得超3個贊
你非常接近,你的第一個問題是你data在你的 if 語句中分配一個變量時只使用一個=,輸出總是正確的,這就是為什么它總是去投資組合光纖。其次,在進行比較時drag 1不應該這樣做,您可以通過在 if 語句之前放置一個來看到這一點,這將在查看瀏覽器控制臺時向您顯示變量中存儲的內容。#drag 1console.log(data)
我相信下面的代碼塊現在應該具有預期的效果。
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
if (data == "drag 1"){
window.open('portfolio-fiber', '_self',false).click();
}
else if (data == "drag 2"){
window.open('portfolio-paint', '_self',false).click();
}
else if (data == "drag 3"){
window.open('portfolio-other', '_self',false).click();
}
}
添加回答
舉報
0/150
提交
取消