我正在开发一种类似于以下提到的图像的益智游戏
当我仅在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>
答案 0 :(得分:0)
将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为例,不要使用每个孩子作为选择器来为每个孩子编写每个属性,而应考虑仅使用父作为选择器来编写一次:
#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>