Как использовать Dragenter для обмена изображениями - PullRequest
Новая
       25

Как использовать Dragenter для обмена изображениями

0 голосов
/ 09 апреля 2019

У меня есть страница, содержащая около 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>

1 Ответ

1 голос
/ 10 апреля 2019

В функции обратного вызова для события 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;
    }
}
...