Question

我想点击图片，然后点击目标div，然后将图片移动到目标div所在的位置。

我是图片的id，有6张图片，ID为1到6，对应于i。

one_c是目的地div。

现在全部工作..谢谢。

function move_c(i) {
  this.image = i;
  one_c.setAttribute('onclick', 'move_to_one_c(image)');
}

function move_to_one_c(i) {
  document.getElementById("one_c").appendChild(document.getElementById(i));
  document.getElementById(i).style.zIndex = 1;
}

See it in action here

Answer 1

使用HTML DOM createElement创建DOM元素，并使用appendChild（）方法附加img并为其分配源ID。我在这里准备了一个样品。这可以帮助您从头开始。

var i= Obj.id;
var elem = document.createElement("img");
elem.setAttribute("src", "picture1.jpg");
elem.setAttribute("height", "100");
elem.setAttribute("width", "100");
elem.setAttribute("alt", "Flower");
document.getElementById(i).appendChild(elem);

https://plnkr.co/edit/Whan4TR3hakfx0cBXofI?p=preview

Answer 2

查看此示例，它会或多或少地提供您所询问的内容，并说明如何在不需要图像上的ID属性的情况下执行此操作。

var otherDiv = document.getElementById('other');
var one_c = document.getElementById('one_c');

var imgs = otherDiv.querySelectorAll('img');
for (var i=0; i < imgs.length; i++) {
  imgs[i].addEventListener('click', move_c);
}

one_c.addEventListener('click', move_to_one_c);

function move_c(e) {
  this.setAttribute('data-selected', true);
  this.className += ' picked';
}

function move_to_one_c(e) {
  var imgs = otherDiv.querySelectorAll('img[data-selected=true]');
  for (var i=0, img; img = imgs[i]; i++) {
    img.setAttribute('data-selected', false);
    img.className = img.className.replace(' picked', '');
    img.removeEventListener('click', move_c);
    one_c.appendChild(img);
  }
}

#other {
  height: 125px;
  width: 500px;
  background: navy;
}
#one_c {
  height: 125px;
  width: 500px;
  background: silver;
}
.picked {
  border: 2px outset;
}

<div id='other'>
  <img src='http://images.nationalgeographic.com/wpf/media-live/photos/000/129/cache/black-skimmer_12923_160x120.jpg'>
  <img src='http://images.nationalgeographic.com/wpf/media-live/photos/000/126/cache/blue-eyed-ostrich_12606_160x120.jpg'>
</div>
<div id='one_c'></div>

JavaScript - 单击图像，然后单击div，然后将图像移动到div

2 个答案: