javascript - 交换(拖放)在特定的 div 中不起作用

标签 javascript html css dom

我正在开发一种益智游戏，看起来像下面提到的图片

当我仅在 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>

最佳答案

tl;博士:

将 drop 和 drop1 函数合并为一个处理这两种情况的函数并将其应用于所有 div:

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

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


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"));
  if (src) {
    var tgt = ev.currentTarget.firstElementChild;
    if (tgt) {
      var srcParent = src.parentNode;
      ev.currentTarget.replaceChild(src, tgt);
      srcParent.appendChild(tgt);
    } else {
      ev.currentTarget.appendChild(src);
    }
  }
}
#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="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv10" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv11" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="odiv12" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

正确答案:

每当您发现自己将同一行代码写了两次时，您应该尝试找到一种方法来仅使用 write it once .

以CSS为例，与其为每个 child 编写每个属性，使用那个 child 作为选择器，你应该考虑只写一次，使用父级作为选择器:

#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 => {
  // `drop`, not `drop1`! We'll merge the two functions into one in next step
  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 {
    // if no `tgt`, (currentTarget is empty), just place the image (src) into it
    ev.currentTarget.appendChild(src);
  }
}

说到这里，我发现您的命名约定有点令人困惑。人们可能认为命名并不重要，但从长远来看，良好的命名约定会大大减少理解(和修改)代码所需的时间。以下是我编写该函数的方式:

function ondrop(ev) {
  ev.preventDefault();
  const image = document.getElementById(ev.dataTransfer.getData("src"));
  // only proceed if `image` exists
  if (image) {
    const targetImage = ev.currentTarget.firstElementChild;
    if (targetImage) {
      // define `imageParent` only for the case where it is used
      const imageParent = image.parentNode;
      ev.currentTarget.replaceChild(image, targetImage);
      imageParent.appendChild(targetImage);
    } else {
      ev.currentTarget.appendChild(image);
    }
  }  
}

让我们看看它的效果。

我冒昧地对它进行了更多的清理，我重命名了一些东西，还更改了 CSS 以具有一些基本的响应能力——它并不完美，但是，恕我直言，它更好:

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

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

function ondragover(e) {
  e.preventDefault();
}

function ondragstart(e) {
  e.dataTransfer.setData("imageId", e.currentTarget.id);
}

function ondrop(e) {
  e.preventDefault();
  const img = document.getElementById(e.dataTransfer.getData("imageId"));
  if (img) {
    const targetImg = e.currentTarget.firstElementChild;
    if (targetImg) {
      const imgParent = img.parentNode;
      e.currentTarget.replaceChild(img, targetImg);
      imgParent.appendChild(targetImg);
    } else {
      e.currentTarget.appendChild(img);
    }
  }  
}
* {
  /* 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;
  float: left;
}

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

#maindiv1>div img,
#maindiv2>div img {
  display: block;
  width: 100%;
  height: auto;
  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>

关于javascript - 交换(拖放)在特定的 div 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58902543/

上一篇：html - 如何修复 "slide-in"cssanimation 以使其正常工作#intro？

下一篇：javascript - 突出显示文本的搜索栏

相关文章：

html - 如何修复导航项的对齐方式？

html - 嵌套在表格单元格中时出现 div 溢出问题 (firefox)

php - 一旦执行就停止条件

html - 在ASP.NET中可以使用HTML音频播放器进行踏板操作吗？

javascript - 选择按钮选项中的 anchor 链接或按钮

html - 在 Excel 中将超链接转换为 HTML 代码

jquery - 悬停时 Div 样式发生变化？

html - 如何将内部div放入外部div

javascript - 在正则表达式 JavaScript 中捕获第三个 href？

javascript - 如何在 React Native 中渲染加载器，直到从服务器获取数据

©2024 IT工具网  联系我们