Блог

Главная - Вопросы по программированию - Ошибка ввода, когда я хочу перетащить элемент

Ошибка ввода, когда я хочу перетащить элемент

#javascript #drag-and-drop #draggable

Вопрос:

У меня возникла ошибка, когда я хочу перетащить изображение в другое место. Ошибка типа: Не удалось выполнить «setData» в «Передаче данных»: требуется 2 аргумента, но только 1 present.at HTMLDivElement.dropLoc.ondrop Я не понимаю этой ошибки. Я хочу перетащить изображения из списка в другое место. Вот мой код

 <ul>
        <li><img id="dragItem" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" /></li>
        <li><img id="dragItem"
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324525/kajabi work/IMG_4954_wgmrmv.jpg" />
        </li>
        <li><img id="dragItem" 
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324530/kajabi work/IMG_4952_auz4in.jpg" />
        </li>
        <li><img id="dragItem"
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324531/kajabi work/IMG_4962_hra9xx.jpg" />
        </li>
        <li><img id="dragItem" 
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324533/kajabi work/IMG_4948_xoxjgd.jpg" />
        </li>
        <li><img id="dragItem"
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324536/kajabi work/IMG_4950_jktzgh.jpg" />
        </li>
        <li><img id="dragItem" 
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324539/kajabi work/IMG_4949_wbxi0l.jpg" />
        </li>
    </ul>

    <div id="dropLocation">Drop here</div>

    <script>
        var dragItem = document.getElementById("dragItem")
        var dropLoc = document.getElementById("dropLocation")

        dragItem.ondragstart = function (evt) {
            evt.dataTransfer.setData('key', evt.target.id);
            //console.log("it dragging...")
        }

        dropLoc.ondragover = function (evt) {
            evt.preventDefault();
            //console.log("it dragover")
        }

        dropLoc.ondrop = function (evt) {
            var dropItem = evt.dataTransfer.setData('key');
            evt.preventDefault();
            var myElement = document.getElementById(dropItem);
            var myNewElement = document.createElement('img');
            myNewElement.src = myElement.src;
            dropLoc.appendChild(myNewElement);

        }
    </script>

Комментарии:

1. Ошибка объясняется сама собой: вы вызываете DataTransfer.setData с одним параметром вместо двух

2. О! Спасибо. Посмотрите на эту строку myNewElement.src = myElement.src , выдает ошибку: Cannot read property 'src' of null at HTMLDivElement.dropLoc.ondrop

3. Ну, это значит myElement , что null

4. Как я могу это решить, я новичок в JS

5. Вы заменили setData на getData ? Пожалуйста, изложите свою проблему более кратко.

Ответ №1:

Что не так в вашем коде:

  • Вы задаете то же id самое для нескольких элементов (что не является допустимым HTML)
  • Как следствие, вы устанавливаете прослушиватель dragstart событий только на первом изображении

Ваш код исправлен ниже (нажмите «Запустить фрагмент кода» для проверки):

 var dragItems = Array.from(document.getElementsByClassName("dragItem"));
var dropLoc = document.getElementById("dropLocation");

dragItems.forEach((dragItem) => {
  dragItem.ondragstart = function (evt) {
    evt.dataTransfer.setData("key", evt.target.id);
    //console.log("it dragging...")
  };
});

dropLoc.ondragover = function (evt) {
  evt.preventDefault();
  //console.log("it dragover")
};

dropLoc.ondrop = function (evt) {
  var dropItem = evt.dataTransfer.getData("key");
  evt.preventDefault();
  var myElement = document.getElementById(dropItem);
  var myNewElement = document.createElement("img");
  myNewElement.src = myElement.src;
  dropLoc.appendChild(myNewElement);
}; 
 <ul>
    <li>
        <img id="img1" class="dragItem" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg"/>
    </li>
    <li>
        <img id="img2" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324525/kajabi work/IMG_4954_wgmrmv.jpg"/>
    </li>
    <li>
        <img id="img3" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324530/kajabi work/IMG_4952_auz4in.jpg"/>
    </li>
    <li>
        <img id="img4" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324531/kajabi work/IMG_4962_hra9xx.jpg"/>
    </li>
    <li>
        <img id="img5" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324533/kajabi work/IMG_4948_xoxjgd.jpg"/>
    </li>
    <li>
        <img id="img6" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324536/kajabi work/IMG_4950_jktzgh.jpg"/>
    </li>
    <li>
        <img id="img7" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324539/kajabi work/IMG_4949_wbxi0l.jpg"/>
    </li>
</ul>
<div id="dropLocation">Drop here</div>

Ответ №2:

используйте этот код

 <html>
<head>
</head>
<body>
     <ul>
        <li><img class="img" id="dragItem1" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" /></li>
        <li><img class="img" id="dragItem2" src="https://res.cloudinary.com/zestarla/image/upload/v1629324530/kajabi work/IMG_4952_auz4in.jpg" /></li>
        <li><img class="img" id="dragItem3" src="https://res.cloudinary.com/zestarla/image/upload/v1629324531/kajabi work/IMG_4962_hra9xx.jpg" /></li>
        <li><img class="img" id="dragItem4" src="https://res.cloudinary.com/zestarla/image/upload/v1629324533/kajabi work/IMG_4948_xoxjgd.jpg" /></li>
        <li><img class="img" id="dragItem5" src="https://res.cloudinary.com/zestarla/image/upload/v1629324536/kajabi work/IMG_4950_jktzgh.jpg" /></li>
        <li><img class="img" id="dragItem6" src="https://res.cloudinary.com/zestarla/image/upload/v1629324539/kajabi work/IMG_4949_wbxi0l.jpg" /></li>
    </ul>

    <div id="dropLocation" draggable="true">Drop here</div>

    <script>
        var dragItem = document.querySelectorAll(".img")
        var dropLoc = document.getElementById("dropLocation")

        dragItem.forEach(obj=>obj.ondragstart = function (evt) {
            evt.dataTransfer.setData('key', evt.target.id);
            //console.log("it dragging...")
        })

        dropLoc.ondragover = function (evt) {
            evt.preventDefault();
            //console.log("it dragover")
        }

        dropLoc.ondrop = function (evt) {
          evt.preventDefault();
            var dropItem = evt.dataTransfer.getData('key');
            
            var myElement = document.getElementById(dropItem);
            var myNewElement = document.createElement('img');
            myNewElement.src = myElement.src;
            dropLoc.appendChild(myNewElement);

        }
    </script>
</body>
</html>
Метки: ,