- Apple
- Banana
- Orange
- Pear
- Carrot
- Pea
- Potato
- Sprout
- Chess
- Dominos
- Monopoly
- Twister
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
window.onload = function() {
var target1 = document.getElementById("fruit");
var target2 = document.getElementById("veg");
var target3 = document.getElementById("games");
var target4 = document.getElementById("numbers");
var list = document.querySelectorAll("#dragsource li");
for (i = 0; i < list.length; i++) {
list[i].draggable = true;
list[i].ondragstart = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
dt.setData("text", event.target.id);
dt.effectAllowed = "move";
};
}
target1.ondragover = function(event) {
var event = event || window.event;
event.preventDefault();
};
target2.ondragover = function(event) {
var event = event || window.event;
event.preventDefault();
};
target3.ondragover = function(event) {
var event = event || window.event;
event.preventDefault();
};
target4.ondragover = function(event) {
var event = event || window.event;
event.preventDefault();
};
target1.ondrop = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
event.preventDefault();
var data = dt.getData("text");
if (data === "item1" || data === "item2" || data === "item3" || data === "item4") {
target1.appendChild(document.getElementById(data));
}
};
target2.ondrop = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
event.preventDefault();
var data = dt.getData("text");
if (data === "item5" || data === "item6" || data === "item7" || data === "item8") {
target2.appendChild(document.getElementById(data));
}
};
target3.ondrop = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
event.preventDefault();
var data = dt.getData("text");
if (data === "item9" || data === "item10" || data === "item11" || data === "item12") {
target3.appendChild(document.getElementById(data));
}
};
target4.ondrop = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
event.preventDefault();
var data = dt.getData("text");
if (data === "item13" || data === "item14" || data === "item15" || data === "item16" || data === "item17" || data === "item18" || data === "item19" || data === "item20" || data === "item21" || data === "item22" || data === "item23" || data === "item24" || data === "item25" || data === "item26" || data === "item27" || data === "item28" || data === "item29" || data === "item30" || data === "item31" || data === "item32" || data === "item33" || data === "item34" || data === "item35" || data === "item36" || data === "item37" || data === "item38" || data === "item39" || data === "item40" || data === "item41" || data === "item42" || data === "item43" || data === "item44" || data === "item45" || data === "item46" || data === "item47" || data === "item48" || data === "item49" || data === "item50" || data === "item51" || data === "item52" || data === "item53" || data === "item54" || data === "item55" || data === "item56" || data === "item57" || data === "item58" || data === "item59" || data === "item60") {
target4.appendChild(document.getElementById(data));
}
};
};html {
background-color: silver;
font-family: sans-serif;
color: black;
}
header {
background-color: black;
color: yellow;
text-align: center;
padding: 5px;
}
nav {
line-height: 20px;
background-color: yellow;
height: 625px;
width: 100px;
float: left;
padding: 5px;
}
section {
height: 220px;
text-align: center;
padding: 5px;
}
#fruit {
width: 90px;
height: 120px;
left: 520px;
top: 150px;
padding: 10px;
border: 2px solid green;
position: absolute;
}
#veg {
width: 90px;
height: 120px;
left: 670px;
top: 150px;
padding: 10px;
border: 2px solid green;
position: absolute;
}
#games {
width: 90px;
height: 120px;
left: 820px;
top: 150px;
padding: 10px;
border: 2px solid green;
position: absolute;
}
#numbers {
width: 90px;
height: 120px;
left: 970px;
top: 150px;
padding: 10px;
border: 2px solid green;
position: absolute;
}
#veg > * {
display: none;
}
#fruit > * {
display: none;
}
#games > * {
display: none;
}
#numbers > * {
display: none;
}
article {
background-color: aqua;
height: 395px;
padding: 5px;
}
ul {
margin: left;
column-count: 6;
column-gap: 20px;
column-width: auto;
text-align: left;
}
li {
list-style-type: none;
padding: 5px;
margin: 2px;
background-color: #CCCCFF;
border: 2px double #CCCCCC;
}
footer {
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
FLOOR 1 W/S 3
Choose a Box
Fruit
Veg
Games
Numbers
- Apple
- Banana
- Orange
- Pear
- Carrot
- Pea
- Potato
- Sprout
- Chess
- Dominos
- Monopoly
- Twister
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
嗨,我有一个问题,当一些拖动项目被删除,我得到这种效果(见图). 显示 我认为这可能与(负面)-margins有关,但我不知道如何解决它.这只需要在IE上工作.
我的 CSS
article {
background-color: aqua;
height: 395px;
padding: 5px;
}
ul {
margin: left;
column-count: 6;
column-gap: 20px;
column-width: auto;
text-align: left;
}
li {
list-style-type: none;
padding: 5px;
margin: 2px;
background-color: #CCCCFF;
border: 2px double #CCCCCC;
}
这是一个jsfiddle 不正确的显示
京公网安备 11010802040832号 | 京ICP备19059560号-6 