如何将图像作为[object HTMLImageElement]放入div中_Html_Css

如何将图像作为[object HTMLImageElement]放入div中

html css

如何将图像作为[object HTMLImageElement]放入div中,html,css,Html,Css,我有一些基本上是一系列div的代码，您可以将图像拖放到一些div中，但不能拖放到其他div中。我用以下几个脚本控制图像的拖放： function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { alert (ev.target); ev.preventDefault();

我有一些基本上是一系列div的代码，您可以将图像拖放到一些div中，但不能拖放到其他div中。我用以下几个脚本控制图像的拖放：

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

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  alert (ev.target);
  ev.preventDefault();
  if(ev.target=="[object HTMLDivElement]"){
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }
}

因此，我希望将一个图像插入到我不想删除的div中，以便它将您尝试删除图像的目标注册为除[object HtmlLevel]之外的内容，最好是[object HTMLImageElement]。显然，背景图像不起作用，在我的css中将内容标签放在div id中也不起作用。在CSS中有没有办法做到这一点，或者在HTML中创建div时应该这样做

编辑：这是我剩下的代码。当然，他们的风格在头脑中

<head>
  <style>
    #droppablediv{
      float: left;
      width: 100px;
      height: 35px;
      border: 1px solid black;
    }

    #nondroppablediv{
      float:left;
      width: 100px;
      height: 35px;
      border: 1px solid black;
      background-image: url(urlhere);
    }
  </style>
  /*
  Javascript functions
  */
</head>
<body>
  <div id="droppablediv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="nondroppablediv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <img src="mydraggableimage.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31">
</body>


#滴剂{
浮动：左；
宽度：100px；
高度：35px；
边框：1px纯黑；
}
#非退化的{
浮动：左；
宽度：100px；
高度：35px；
边框：1px纯黑；
背景图片：url（urlhere）；
}
/*
Javascript函数
*/

下面是一个代码的工作版本。请注意，您可以将图像拖放到一个框中，但不能将两者放在同一个框中。

只需使用

innerHTML

标记即可。例如，当用户拖动时，获取起始单元格（从中拖动）并将其移动到目标单元格（拖动到）。然后，获取起始单元格的HTML。但是，图像必须作为带有src属性的HTML在div中

function drag(startDivId,endDivId){
    try{     
     var img = document.getELementById(startDivId).innerHTML
     document.getElementById(endDivId).innerHTML=img
     return true
    } catch(e) {
     return e
    }
 }

给我你目前完整的HTML和一个HTML中间使用的例子。然后我可以根据您的HTML定制它，而下面的答案可能不起作用@TimGraupner

[object htmldevelment]

是将表示DOM元素的复杂对象强制放入字符串上下文时得到的结果。除此之外，我不知道你到底想问什么。Done@TheOneWhoMadeSo，你是不是想让两个人都能在同一个boc里@TimGraupnerNo，我正试图通过代码放置一个无法在div 5中移动的图像。请接受答案并投票，如果它有帮助的话。评论中的感谢不会添加到答案中@铁姆格拉普纳