3つの画像のいずれかをターゲット画像にドラッグアンドドロップできるWebページを作成しようとしていますが、ターゲットにドラッグアンドドロップした画像に応じて、ユーザーは別のリンクに移動します。たとえば、ユーザーがID「drag1」の画像をターゲット画像にドラッグすると、私のWebサイトのWebページ「portfolio-fiber」に移動します。または、ユーザーがID「drag2」の画像をターゲット画像にドラッグすると、Webページ「portfolio-paint」に移動します。等々。これまでのところ、ほとんどすべてを機能させることができましたが、画像のいずれかをドラッグすると、すべて同じWebページ（「ポートフォリオファイバー」）に移動します。私はコーディングに不慣れです、したがって、ドラッグ可能なさまざまな画像をユーザーにさまざまなリンクに誘導する方法について、アドバイスをいただければ幸いです。以下は私がこれまでに持っているスクリプトです。
<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>
<p>DRAG THE MEDIA YOU WANT TO VIEW ONTO THE CANVAS:</p>
<br><div grid-row="" grid-pad="1" grid-gutter="2">
<div grid-col="x10" grid-pad="1"><h1><a href="portfolio-fiber" rel="history" class="image-link"><img id="drag 1" src="https://freight.cargo.site/t/original/i/75d59481ec447dc026afb6cd41f92f877969c06e56f8e02dc558223481e2897c/knit-text.png" draggable="true" ondragstart="drag(event)" width="600" height="377" style="width: 381.368px; height: 239.626px;"></a></h1></div>
<div grid-col="x10" grid-pad="1"><h1><a href="portfolio-paint" rel="history" class="image-link"><img id="drag 2" src="https://freight.cargo.site/t/original/i/5e3c09e37a3f9d01243b5541e3d573bedbbf74c0008d1e69cb23ce7537db1171/paint-text.png" draggable="true" ondragstart="drag(event)" width="600" height="377" style="width: 381.368px; height: 239.626px;"></a></h1></div>
<div grid-col="x10" grid-pad="1"><h1><a href="portfolio-other" rel="history" class="image-link"><img id="drag 3" src="https://freight.cargo.site/t/original/i/5e3c09e37a3f9d01243b5541e3d573bedbbf74c0008d1e69cb23ce7537db1171/other-text.png" draggable="true" ondragstart="drag(event)" width="600" height="377" style="width: 381.368px; height: 239.626px;"></a></h1></div>
<img id="div1" src="https://freight.cargo.site/t/original/i/d1c107906d7f35add9185f9993ca8148a6993a62477439b5012301ea45bff32b/Asset-1.png" ondrop="drop(event)" ondragover="allowDrop(event)">
<br>
あなたは非常に近かった、あなたの最初の問題はあなたが変数を割り当てるときにdata単一を使用することによってあなたのifステートメントで割り当てていたということでし=た出力は常に真であり、それが常にポートフォリオファイバーに行きました。次に、比較を行うときはそうではdrag 1ないはずです。これは、ブラウザコンソールを見たときに変数に格納されている内容を示すifステートメントの前に#drag 1置くことで確認できますconsole.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();
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加