javascript - 如何在 Javascript 的帮助下将图像拖放到同一 block 中？

Question

我面临一个问题，我想在 javascript 的帮助下将图像拖放到两个图像之间或交换两个图像。但我无法做到这一点。在下面的代码中有一个背景颜色的 div，当我单击下面的图标时，它们将一个一个地移动到那个 div 上。但接下来我要做的是，我必须拖放要转到该 div 的图像，甚至交换它们或在两者之间放置一个图像。我无法完成那个任务。谁能帮帮我。

提前致谢。

这是我的代码:

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 有两种不同的方法，一种是追加图片，另一种是替换图片。您可以尝试以下方法:

脚本内容

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