放入 div 用于 javascript答案

【问题标题】：Drop in a div for javascript放入 div 用于 javascript
【发布时间】：2017-10-03 03:25:01
【问题描述】：

我正在尝试将图像拖放到 div 区域，但我只能拖动它，但当我将其拖放时它不会出现在 div 中。我还想复制图像，这样当它被丢弃时，原始图像不会消失。

Javascript 代码：

var dragItem1 = document.getElementById("drag1");
                var dropdiv1 = document.getElementById("div1");

                //event will be fired when a user starts dragging the item
                dragItem1.ondragstart = function (evt) {
                    evt.dataTransfer.setData('key1', evt.target.id);
                    console.log("its dragging..");
                }

                //event will be fired when an element is selected and dragged over a drop location
                dropdiv1.ondragover = function (evt) {
                    evt.preventDefault();
                    console.log("it's dragover..");
                }

                //event will be fired when you drop dragged item on drop location
                dropdiv1.ondrop = function (evt) {
                    evt.preventDefault();
                    var dropItem1 = evt.dataTransfer.getData('key1');
                    console.log(evt);
                    console.log("its dropped..");
                    console.log(dropItem1);
                    var myElement1 = document.getElementById(dropItem1);
                    console.log(myElement1);
                    var myNewElement = document.createElement('img');
                    myNewElement.src = myElement1.src;
                    console.log(myNewElement);
                }

HTML 代码：

<img id="drag1" draggable="true" src="images/equation1_3.png">

<div class="boxFirstCol box1 b1 box" id="div1" ondrop="ondrop(event)" ondragover="allowDrop(event)"> </div>

【问题讨论】：

你永远不会将元素添加到你的 drop div

标签： javascript html drag-and-drop

【解决方案1】：

使用document.getElementById("div1").appendChild(myNewElement); 将元素添加到放置位置。

var dragItem1 = document.getElementById("drag1");
                var dropdiv1 = document.getElementById("div1");

                //event will be fired when a user starts dragging the item
                dragItem1.ondragstart = function (evt) {
                    evt.dataTransfer.setData('key1', evt.target.id);
                    
                }

                //event will be fired when an element is selected and dragged over a drop location
                dropdiv1.ondragover = function (evt) {
                    evt.preventDefault();
                  
                }

                //event will be fired when you drop dragged item on drop location
                dropdiv1.ondrop = function (evt) {
                    evt.preventDefault();
                    var dropItem1 = evt.dataTransfer.getData('key1');
                   
                    var myElement1 = document.getElementById(dropItem1);
                    console.log(myElement1);
                    var myNewElement = document.createElement('img');
                    var myNewElement
                    myNewElement.src = myElement1.src;
                    document.getElementById("div1").appendChild(myNewElement);

                }

<img id="drag1" draggable="true" src="http://www.icon2s.com/img64/64x64-animal-icon-hamster.png">

<div style="background-color:red;width:200px;height:200px;" id="div1" ondrop="ondrop(event)" ondragover="allowDrop(event)"> </div>

【讨论】：

【解决方案2】：

您可以使用.appendChild() 将动态创建的<img> 元素附加到drop 事件处理程序中的event.target。

dropdiv1.ondrop = function(evt) {
  evt.preventDefault();
  var dropItem1 = evt.dataTransfer.getData('key1');
  console.log(evt);
  console.log("its dropped..");
  console.log(dropItem1);
  var myElement1 = document.getElementById(dropItem1);
  console.log(myElement1);
  var myNewElement = document.createElement('img');
  myNewElement.src = myElement1.src;
  console.log(myNewElement);
  evt.target.appendChild(myNewElement); // append `<img>` to `<div>`
}

http://plnkr.co/edit/OndnpzsIJjTjhbiNbhUc?p=preview

【讨论】：