Javascript를 사용하여 같은 블록에 이미지를 끌어다 놓는 방법은 무엇입니까?

Question

이미지를 드래그하여 두 이미지 사이에 놓거나 자바 스크립트를 사용하여 두 이미지를 바꿔야하는 문제가 있습니다. 그러나 나는 이것을 할 수 없다. 아래 코드에서 볼 수 있듯이 아이콘 아래를 클릭하는 동안 해당 div에서 하나씩 이동하게되는 배경색의 div가 있습니다. 하지만 다음으로해야 할 일은 해당 div에있는 이미지를 드래그 앤 드롭하거나 이미지를 바꾸거나 이미지를 배치해야한다는 것입니다. 나는 그 일을 할 수 없다. 누구든지 나를 도와 줄 수 있어요.

미리 감사드립니다. drop.One 이미지를 추가 용이고 다른 하나는 다음을 시도 할 수있는 image.You를 교체위한 두 개의 별도의 방법이 있습니다

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

:

이

내 코드입니다 :

SCRIPT 내용

<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

:

SCRIPT 내용을

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">