我有这个房间，还有一些家具。
1. 我想让家具在掉落时位于地板上方，而不是地板下方。
2. 我想交换家具，因此当您将家具放到已经有家具的地板上时，应该交换位置。
This is what I have made for now...
我的代码:
$(document).ready(function() {
$('#div2').on("drop", function(e) {
e.preventDefault();
e.stopPropagation();
});
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}#floor {
top:116px;
left:393px;
position:absolute;
margin-bottom: 10px;
height: 40px;
width: 65px;
background-image: url("http://i.imgur.com/tCuykFV.png")
}
#floor:hover {
height: 43px;
width: 66px;
background-image: url("http://i.imgur.com/Eo1dNNv.png")
}
#space {
width:200px;
}
#div3 {
float: right;
border: 1px solid #CCC;
margin-bottom: 10px;
height: 200px;
width: 102px;
}
#dice {
width:56px;
height:79px;
}
#walls {
position:absolute;
top:0px;
left:0px;
width:688px;
height:510px;
border: 1px solid #CCC;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
</head>
<img id="walls" src="http://i.imgur.com/FA6ka0v.png">
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:132px;left:424px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:132px;left:360px;"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://hydra-media.cursecdn.com/habbo.gamepedia.com/e/ed/Edicehc.png?version=6e01ba71341b8361df23749c65498f44" draggable="true" ondragstart="drag(event)" id="drag1" width="56" height="79">
<img src="https://hydra-media.cursecdn.com/habbo.gamepedia.com/0/0f/Mocchamaster.png?version=6cf4d970f845287fa21d4ef7691eee84" draggable="true" ondragstart="drag(event)" id="drag2" width="66" height="137">
</div>
</div>最佳答案
为拖动的图像添加以下样式
#floor img {
position: absolute;
bottom: 0;}
检查以下代码:
$(document).ready(function() {
$('#div2').on("drop", function(e) {
e.preventDefault();
e.stopPropagation();
});
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var temp = null;
if(ev.target.nodeName == 'IMG'){
temp = $(ev.target);
$(ev.target).parent().empty().append(document.getElementById(data));
$('#div3 #div1').append(temp);
}
else
ev.target.appendChild(document.getElementById(data));
}#floor {
top:116px;
left:393px;
position:absolute;
margin-bottom: 10px;
height: 40px;
width: 65px;
background-image: url("http://i.imgur.com/tCuykFV.png")
}
#floor:hover {
height: 43px;
width: 66px;
background-image: url("http://i.imgur.com/Eo1dNNv.png")
}
#space {
width:200px;
}
#div3 {
float: right;
border: 1px solid #CCC;
margin-bottom: 10px;
height: 200px;
width: 102px;
}
#dice {
width:56px;
height:79px;
}
#walls {
position:absolute;
top:0px;
left:0px;
width:688px;
height:510px;
border: 1px solid #CCC;
}
#floor img {
position: absolute;
bottom: 0;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
</head>
<img id="walls" src="http://i.imgur.com/FA6ka0v.png">
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:132px;left:424px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:132px;left:360px;"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://hydra-media.cursecdn.com/habbo.gamepedia.com/e/ed/Edicehc.png?version=6e01ba71341b8361df23749c65498f44" draggable="true" ondragstart="drag(event)" id="drag1" width="56" height="79">
<img src="https://hydra-media.cursecdn.com/habbo.gamepedia.com/0/0f/Mocchamaster.png?version=6cf4d970f845287fa21d4ef7691eee84" draggable="true" ondragstart="drag(event)" id="drag2" width="66" height="137">
</div>
</div>关于javascript - 拖放式家具进入房间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43677588/