Javascriptの助けを借りて同じブロックに画像をドラッグ・アンド・ドロップする方法は？

Question

私は画像をドラッグして2つの画像の間にドロップするか、JavaScriptの助けを借りて2つの画像を入れ替えるという問題に直面しています。しかし、私はこれをすることができません。下のコードのように、私はアイコンの下をクリックしている間にdivで1つずつ移動する背景色のdivがあります。しかし、私がしなければならないのは、そのdivに行くイメージをドラッグアンドドロップしたり、それらを入れ替えたり、2つのイメージの間にイメージを配置しなければならないということです。私はその仕事をすることができません。誰でも助けてくれますか？

ありがとうございます。

これは私のコードです：

function changeHome() { 
 
    document.getElementById('color').style.backgroundColor = "coral"; 
 
} 
 

 
function changeGray() { 
 
    document.getElementById('color').style.backgroundColor = "gray"; 
 
} 
 

 
function changeRed() { 
 
    document.getElementById('color').style.backgroundColor = "red"; 
 
} 
 

 
function changeGreen() { 
 
    document.getElementById('color').style.backgroundColor = "green"; 
 
} 
 

 
function changeBlue() { 
 
    document.getElementById('color').style.backgroundColor = "blue"; 
 
} 
 

 
$(document).ready(function() { 
 
    $('.image').click(function() { 
 
    var srcimg = $(this).attr('src'); 
 
    $('#color').append("<img src=" + srcimg + " width='70' height='70'>"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br/> 
 
<div class="container"> 
 
    <h1 align="center"><u> JavaScript Simple learning </u></h1> 
 
    <h3 align="center"> Use of JavaScript to drag and drop icons in Background image </h3> 
 
    <br/> <br/> 
 
    <div class="col-md-10"> 
 
    <div id="color"> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-2"> 
 
    <button onclick="changeHome()"> Home Color </button> <br/><br/><br/> 
 
    <button onclick="changeGray()"> Click for Gray </button> <br/><br/> 
 
    <button onclick="changeRed()"> Click for Red </button> <br/><br/> 
 
    <button onclick="changeGreen()"> Click for Green </button> <br/><br/> 
 
    <button onclick="changeBlue()"> Click for Blue </button> <br/><br/> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <h2><u> List of Icons </u></h2> 
 
    <img class="image" src="images/fb.jpeg" width="70" height="70" /> 
 
    <img class="image" src="images/twitter.jpeg" width="70" height="70" /> 
 
    <img class="image" src="images/linkedin.jpeg" width="70" height="70" /> 
 
    <img class="image" src="images/gmail.jpeg" width="70" height="70" /> 
 
    <img class="image" src="images/instagram.jpeg" width="70" height="70" /> 
 
    <img class="image" src="images/whatsapp.jpeg" width="70" height="70" /> 
 
    <img class="image" src="images/telegram.jpeg" width="70" height="70" /> 
 
</div>

Answer 1

drop.Oneのための2つの別々の方法がありますが、画像と別のものを追加するためであるimage.Youを交換して次のことを試すことができるためです。

スクリプト内容

<script> 
     function changeHome() { 
      document.getElementById('color').style.backgroundColor = "coral"; 
     } 

     function changeGray() { 
      document.getElementById('color').style.backgroundColor = "gray"; 
     } 

     function changeRed() { 
      document.getElementById('color').style.backgroundColor = "red"; 
     } 

     function changeGreen() { 
      document.getElementById('color').style.backgroundColor = "green"; 
     } 

     function changeBlue() { 
      document.getElementById('color').style.backgroundColor = "blue"; 
     } 
     $(document).ready(function() { 
      $('.image').click(function() { 
       var srcimg = $(this).attr('src'); 
       var imgid = $(this).attr('id'); 
       console.log($(this)); 
       $('#color').append('<div ondrop="drop(event)" ondragover="allowDrop(event)" style="float:left;display:block;height:50px;width:50px"><img id=' + imgid + "1" + ' src=' + srcimg + ' draggable="true" ondragstart="drag(event)" width="70" height="70">'); 
      }); 
     }); 

     function allowDrop(ev) { 
      ev.preventDefault(); 
     } 

     function drag(ev) { 
      ev.dataTransfer.setData("src", ev.target.id); 
     } 

     function drop(ev,ui) { 
      console.log("evvv" + ev.srcElement); 
      console.log($(this).parent('div')); 
      ev.preventDefault(); 
      var src = document.getElementById(ev.dataTransfer.getData("src")); 
      var srcParent = src.parentNode; 
      if (srcParent.parentNode.id == "div1") 
      { 
       var data = ev.dataTransfer.getData("src"); 
       ev.target.appendChild(document.getElementById(data)); 
      } 
      else 
      { 
       var tgt = ev.currentTarget.firstElementChild; 

       ev.currentTarget.replaceChild(src, tgt); 
       srcParent.appendChild(tgt); 
      } 

     } 
     function drop1(ev) { 
      ev.preventDefault(); 
      var data = ev.dataTransfer.getData("src"); 
      ev.target.appendChild(document.getElementById(data)); 
     } 
    </script> 

HTMLコンテンツ

<div class="container"> 
     <h1 align="center"><u> JavaScript Simple learning </u></h1> 
     <h3 align="center"> Use of JavaScript to drag and drop icons in Background image </h3> 
     <br /> <br /> 
     <div class="col-md-10"> 
      <div id="color" style="height:100px" ondragover="allowDrop(event)" ondrop="drop(event)" > 
      </div> 
     </div><br /><br /> 
     <div class="col-md-2"> 
      <button onclick="changeHome()"> Home Color </button> <br /><br /><br /> 
      <button onclick="changeGray()"> Click for Gray </button> <br /><br /> 
      <button onclick="changeRed()"> Click for Red </button> <br /><br /> 
      <button onclick="changeGreen()"> Click for Green </button> <br /><br /> 
      <button onclick="changeBlue()"> Click for Blue </button> <br /><br /> 
     </div> 

</div> 
<div class="container" id="div1"> 
    <h2><u> List of Icons </u></h2> 
    <div style="float:left;display:block"> 
     <img class="image" id="img1" src="Images/natural.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" /> 
    </div> 
    <div style="float:left;display:block"> 
     <img class="image" id="img2" src="Images/nature2.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" /> 
     </div> 
    <div style="float:left;display:block"> 
     <img class="image" id="img3" src="Images/sunset.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" /> 
     </div> 
    <div style="float:left;display:block"> 
     <img class="image" id="img4" src="Images/dp1.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" /> 
     </div> 
    <div style="float:left;display:block"> 
     <img class="image" id="img5" src="Images/dp2.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" /> 
     </div> 
    <div style="float:left;display:block"> 
     <img class="image" id="img6" src="Images/guitar.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" /> 
     </div> 
    <div style="float:left;display:block"> 
     <img class="image" id="img7" src="Images/images.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" /> 
     </div> 
    </div> 

Answer 2

次の関数を使用して、ダブルクリックイベントに1枚の写真を削除することができます。

スクリプト内容

function ImageDel(elem) 
     { 

      elem.parentElement.remove(); //to remove an parent div of the image 
      elem.remove(); //to remove the image 
     } 

HTMLコンテンツ

を

<img ondblclick="ImageDel(this)" width="70" height="70">