交换（拖放）在特定的div中不起作用

Question

我正在开发一种类似于以下提到的图像的益智游戏

当我仅在mainDiv1的元素上交换内容（拖放）时，它工作正常。

[[mainDiv1内交换]

当我将元素（图像）从mainDiv1拖放到mainDiv2时，它也以这种方式工作。

[[mainDiv1到mainDiv2图像在不同的div上拖放]

问题：

1。当我尝试交换mainDiv2中的元素时，它不起作用。被拖动的元素消失了。

[2。如果尝试将这些图像放回mainDiv1，我也不能这样做。

谁能告诉我我要去哪里错了，或者是否可以在ondrag / ondrop上调用多个函数。

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

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

}

function drop(ev) {
ev.preventDefault();

var src = document.getElementById(ev.dataTransfer.getData("src"));
var srcParent = src.parentNode;
var tgt = ev.currentTarget.firstElementChild;
ev.currentTarget.replaceChild(src, tgt);
srcParent.appendChild(tgt);
}
function drop1(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("src");
ev.target.appendChild(document.getElementById(data));


}

#maindiv1
{
width: 48%;
height: fit-content;
background-color: #ffc7b1;
border: 1px solid;
float: left;
}
#div1
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: red;
}
#div2
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: orange;
}
#div3
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: yellow;
}
#div4
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: green;
}
#div5
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: blue;
}
#div6
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: violet;
}
#div7
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: indigo;
}
#div8 
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: chocolate;
}
#div9
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: teal;
}
#div10
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: darkolivegreen;
}
#div11
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: salmon;
}
#div12
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: plum;
}
#img1
{
width: 100%;
height: 200px;
}
#img2
{
width: 100%;
height: 200px;
}
#img3
{
width: 100%;
height: 200px;
}
#img4
{
width: 100%;
height: 200px;
}
#img5
{
width: 100%;
height: 200px;
}
#img6
{
width: 100%;
height: 200px;
}
#img7
{
width: 100%;
height: 200px;
}
#img8
{
width: 100%;
height: 200px;
}
#img9
{
width: 100%;
height: 200px;
}
#img10
{
width: 100%;
height: 200px;
}
#img11
{
width: 100%;
height: 200px;
}
#img12
{
width: 100%;
height: 200px;
}
#separator
{
width: 2%;
height: 500px;
background-color: white;
float: left;
}
#maindiv2
{
width: 48%;
height: fit-content;
background-color: #ffc7b1;
border: 1px solid;
float: left;
}
#odiv1
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: red;
}
#odiv2
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: orange;
}
#odiv3
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: yellow;
}
#odiv4
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: green;
}
#odiv5
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: blue;
}
#odiv6
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: violet;
}
#odiv7
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: indigo;
}
#odiv8 
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: chocolate;
}
#odiv9
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: teal;
}
#odiv10
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: darkolivegreen;
}
#odiv11
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: salmon;
}
#odiv12
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: plum;
}

<div id="maindiv1">
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/1.gif" alt="Image not available" id="img1" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/2.gif" alt="Image not available" id="img2" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/3.gif" alt="Image not available" id="img3" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/4.gif" alt="Image not available" id="img4" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/5.gif" alt="Image not available" id="img5" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/6.gif" alt="Image not available" id="img6" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/7.gif" alt="Image not available" id="img7" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/8.gif" alt="Image not available" id="img8" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/9.gif" alt="Image not available" id="img9" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/10.gif" alt="Image not available" id="img10" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/11.gif" alt="Image not available" id="img11" ondragstart="drag(event)" draggable="true">
  </div>
  <div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/12.gif" alt="Image not available" id="img12" ondragstart="drag(event)" draggable="true">
  </div>
</div>
<div id="separator"></div>
<div id="maindiv2">
  <div id="odiv1" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv2" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv3" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv4" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv5" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv6" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv7" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv8" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv9" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv10" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv11" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
  <div id="odiv12" ondrop="drop1(event)" ondragover="allowDrop(event)">

  </div>
</div>

Answer 1

[无论何时您发现自己编写两次相同的代码行，都应该问自己是否没有办法只编写一次。

例如，使用CSS，而不是使用该子代作为选择器来编写对所有子代都相同的每个属性，而只能使用父代作为选择器来编写一次它：

因此，简化版本为：

#maindiv1, #maindiv2 {
  width: 48%;
  height: fit-content;
  background-color: #ffc7b1;
  border: 1px solid;
  float: left;
}

#maindiv1 > div, #maindiv2 > div {
  border: 1px solid;
  width: 24.9%;
  height: 200px;
  float: left;
}

#maindiv1 > div img {
  width: 100%;
  height: 200px;
}

#separator {
  width: 2%;
  height: 500px;
  background-color: white;
  float: left;
}

#div1, #odiv1 { background-color: red; }

#div2, #odiv2 { background-color: orange; }

#div3, #odiv3 { background-color: yellow; }

#div4, #odiv4 { background-color: green; }

#div5, #odiv5 { background-color: blue; }

#div6, #odiv6 { background-color: violet; }

#div7, #odiv7 { background-color: indigo; }

#div8, #odiv8 { background-color: chocolate; }

#div9, #odiv9 { background-color: teal; }

#div10, #odiv10 { background-color: darkolivegreen; }

#div11, #odiv11 { background-color: salmon; }

#div12, #odiv12 { background-color: plum; }

优点是，当您决定将它们更改为其他任何内容时，只有一个地方需要修改，并且它们都会全部更改。例如，删除硬编码的200px高度并使它们响应。

---

完全相同的原理适用于JavaScript。与其为每个元素的相同事件指定相同的功能，不如使用遍历每个元素并应用它的函数/例程：

const leftDivs = document.querySelector('#maindiv1').querySelectorAll('div');
[...leftDivs].forEach(div => {
  div.ondrop = drop;
  div.ondragover = allowDrop;
});

const rightDivs = document.querySelector('#maindiv2').querySelectorAll('div');
[...rightDivs].forEach(div => {
  div.ondrop = drop;
  div.ondragover = allowDrop;
});

const images = document.querySelector('#maindiv1').querySelectorAll('img');
[...images].forEach(img => {
  img.ondragstart = drag;
  img.draggable = true;
})

显然，您需要删除硬编码的ondrop，ondragover，ondragstart和draggable属性，因为您是动态应用它们的。

---

但是，要使此功能正常工作，而不是让两个不同的函数处理每种情况（当您将一个已有图像的元素放入一个空的元素中时，必须将这两个函数合并为一个） ：

function drop(ev) {
  ev.preventDefault();

  var src = document.getElementById(ev.dataTransfer.getData("src"));
  var srcParent = src.parentNode;
  var tgt = ev.currentTarget.firstElementChild;
  if (tgt) {
    ev.currentTarget.replaceChild(src, tgt);
    srcParent.appendChild(tgt);
  } else {
    var data = ev.dataTransfer.getData("src");
    ev.target.appendChild(document.getElementById(data));
  }
}

让我们看到它起作用（我还自由地对其进行了一些清理，并且我将CSS更改为更具响应性-它不是完美的，但是恕我直言，它更好）。如果有的话，那就是概念的证明，这应该使DRY编码的优点更加清楚：

const leftDivs = document.querySelector('#maindiv1').querySelectorAll('div');
[...leftDivs].forEach(div => {
  div.ondrop = drop;
  div.ondragover = allowDrop;
});

const rightDivs = document.querySelector('#maindiv2').querySelectorAll('div');
[...rightDivs].forEach(div => {
  div.ondrop = drop;
  div.ondragover = allowDrop;
});

const images = document.querySelector('#maindiv1').querySelectorAll('img');
[...images].forEach(img => {
  img.ondragstart = drag;
  img.draggable = true;
})

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

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

function drop(ev) {
  ev.preventDefault();

  var src = document.getElementById(ev.dataTransfer.getData("src"));
  var srcParent = src.parentNode;
  var tgt = ev.currentTarget.firstElementChild;
  if (tgt) {
    ev.currentTarget.replaceChild(src, tgt);
    srcParent.appendChild(tgt);
  } else {
    var data = ev.dataTransfer.getData("src");
    ev.target.appendChild(document.getElementById(data));
  }
}

* {
  /* make all elements include border in width, so you don't have to use 24.9% */
  box-sizing: border-box;
}
#maindiv1, #maindiv2 {
  width: 48%;
  height: fit-content;
  background-color: #ffc7b1;
  border: 1px solid;
  float: left;
}

#maindiv1 > div, #maindiv2 > div {
  width: 25%;
  padding-bottom: 25%;
  float: left;
  position: relative;
  border: 1px solid black;
}

#maindiv1 > div img, #maindiv2 > div img {
  border: 1px solid black;
  display: block;
  width: calc(100% + 2px);
  top: -1px;
  left: -1px;
  height: calc(100% + 2px);
  position: absolute;
}

#separator {
  width: 2%;
  min-height: 10px;
  background-color: white;
  float: left;
}

#div1, #odiv1 { background-color: red; }

#div2, #odiv2 { background-color: orange; }

#div3, #odiv3 { background-color: yellow; }

#div4, #odiv4 { background-color: green; }

#div5, #odiv5 { background-color: blue; }

#div6, #odiv6 { background-color: violet; }

#div7, #odiv7 { background-color: indigo; }

#div8, #odiv8 { background-color: chocolate; }

#div9, #odiv9 { background-color: teal; }

#div10, #odiv10 { background-color: darkolivegreen; }

#div11, #odiv11 { background-color: salmon; }

#div12, #odiv12 { background-color: plum; }

<div id="maindiv1">
  <div id="div1">
    <img src="https://picsum.photos/id/237/200/200" alt="" id="img1">
  </div>
  <div id="div2">
    <img src="https://picsum.photos/id/238/200/200" alt="" id="img2">
  </div>
  <div id="div3">
    <img src="https://picsum.photos/id/239/200/200" alt="" id="img3">
  </div>
  <div id="div4">
    <img src="https://picsum.photos/id/240/200/200" alt="" id="img4">
  </div>
  <div id="div5">
    <img src="https://picsum.photos/id/241/200/200" alt="" id="img5">
  </div>
  <div id="div6">
    <img src="https://picsum.photos/id/242/200/200" alt="" id="img6">
  </div>
  <div id="div7">
    <img src="https://picsum.photos/id/243/200/200" alt="" id="img7">
  </div>
  <div id="div8">
    <img src="https://picsum.photos/id/244/200/200" alt="" id="img8">
  </div>
  <div id="div9">
    <img src="https://picsum.photos/id/247/200/200" alt="" id="img9">
  </div>
  <div id="div10">
    <img src="https://picsum.photos/id/248/200/200" alt="" id="img10">
  </div>
  <div id="div11">
    <img src="https://picsum.photos/id/249/200/200" alt="" id="img11">
  </div>
  <div id="div12">
    <img src="https://picsum.photos/id/250/200/200" alt="" id="img12">
  </div>
</div>
<div id="separator"></div>
<div id="maindiv2">
  <div id="odiv1">

  </div>
  <div id="odiv2">

  </div>
  <div id="odiv3">

  </div>
  <div id="odiv4">

  </div>
  <div id="odiv5">

  </div>
  <div id="odiv6">

  </div>
  <div id="odiv7">

  </div>
  <div id="odiv8">

  </div>
  <div id="odiv9">

  </div>
  <div id="odiv10">

  </div>
  <div id="odiv11">

  </div>
  <div id="odiv12">

  </div>
</div>