Question

我的页面上充满了约42张图像，我需要能够选择一张图像并将其拖动。当我将其拖到另一张图像上时，它需要将刚刚移过的图像与当前移过的图像交换。

到目前为止，它在拖动和交换方面都有效，但是当我将其拖动到新图像上时，它将与我选择的第一张图像交换。我希望这是有道理的！如果没有，我可以尝试更清楚地解释。这是我的脚本部分中的内容：

<html>
<head>
    <style>
             .normalImage {
                width: 225px;
                height: 115px;
            }
        </style>
       <script>
          var currentImage;
          var temp;

        function setup(){
            document.addEventListener("dragstart", dragStart);
            document.addEventListener("dragend", dragEnd);
            var allImages = document.images;
            for(var i = 0; i < allImages.length; i++){
                allImages[i].className = "normalImage";
                allImages[i].addEventListener("dragenter", dragEnterHandler);
                //allImages[i].addEventListener("dragover", dragOverHandler);
            }
        }

        window.addEventListener('load', (event) =>{
            setup();
        });

        function dragStart(event){
            currentImage = event.target;

        }

        function dragEnd(event){
            var construction = document.getElementById("construction");
            if(event.target == construction){
                construction.innerHTML = "&nbsp";
            }
        }

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

        function dragOverHandler(event){
            event.preventDefault();
        }

        function dragEnterHandler(event){
            event.preventDefault();
            temp = currentImage.src;
            currentImage.src = event.target.src;
            event.target.src = temp;
            previous = event.target.src;
            // currentImage.src = event.target.src; changes everything to start picture
            console.log(event);
        }
    </script>
</head>
<body>
    <table>
            <tr>
                <td><img src="images/Image01.jpg"/></td>
                <td><img src="images/Image02.jpg"/></td>
                <td><img src="images/Image03.jpg"/></td>
                <td><img src="images/Image04.jpg"/></td>
                <td><img src="images/Image05.jpg"/></td>
                <td><img src="images/Image06.jpg"/></td>
                <td><img src="images/Image07.jpg"/></td>
            </tr>
            <tr>
                <td><img src="images/Image08.jpg"/></td>
                <td><img src="images/Image09.jpg"/></td>
                <td><img src="images/Image10.jpg"/></td>
                <td><img src="images/Image11.jpg"/></td>
                <td><img src="images/Image12.jpg"/></td>
                <td><img src="images/Image13.jpg"/></td>
                <td><img src="images/Image14.jpg"/></td>
            </tr>
            <tr>
                <td><img src="images/Image15.jpg"/></td>
                <td><img src="images/Image16.jpg"/></td>
                <td><img src="images/Image17.jpg"/></td>
                <td><img src="images/Image18.jpg"/></td>
                <td><img src="images/Image19.jpg"/></td>
                <td><img src="images/Image20.jpg"/></td>
                <td><img src="images/Image21.jpg"/></td>
            </tr>
            <tr>
                <td><img src="images/Image01.jpg"/></td>
                <td><img src="images/Image02.jpg"/></td>
                <td><img src="images/Image03.jpg"/></td>
                <td><img src="images/Image04.jpg"/></td>
                <td><img src="images/Image05.jpg"/></td>
                <td><img src="images/Image06.jpg"/></td>
                <td><img src="images/Image07.jpg"/></td>
            </tr>
            <tr>
                <td><img src="images/Image08.jpg"/></td>
                <td><img src="images/Image09.jpg"/></td>
                <td><img src="images/Image10.jpg"/></td>
                <td><img src="images/Image11.jpg"/></td>
                <td><img src="images/Image12.jpg"/></td>
                <td><img src="images/Image13.jpg"/></td>
                <td><img src="images/Image14.jpg"/></td>
            </tr>
            <tr>
                <td><img src="images/Image15.jpg"/></td>
                <td><img src="images/Image16.jpg"/></td>
                <td><img src="images/Image17.jpg"/></td>
                <td><img src="images/Image18.jpg"/></td>
                <td><img src="images/Image19.jpg"/></td>
                <td><img src="images/Image20.jpg"/></td>
                <td><img src="images/Image21.jpg"/></td>
            </tr>
        </table>
</body>
</html>

Answer 1

在Drageenter事件的回调函数中，您需要存储对目标图像，前一张图像及其来源的引用，并相应地交换它们。将此替换为dragEnterHandler（）函数：

function dragEnterHandler(event)
{
    if(currentImage!=event.target)
    {
        var newSrc=event.target.src;
        var oldImage=currentImage;

        event.target.src=oldImage.src;
        oldImage.src=newSrc;
        currentImage=event.target;
    }
}

如何使用Dragenter交换图像

1 个答案: