我得到了这个拖放 javascript，它被用于将家具放在房间里。 Watch on my website here.
我想在将家具拖到地板(每个瓷砖)上时这样做，鼠标悬停的瓷砖会改变图像(就像鼠标悬停/悬停一样)。我如何在拖动时用 javascript 制作它？
这是我的代码:
$(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));
}
$(document).on("click", "#tapetsmall", function(){
document.getElementById("walls").src="http://i.imgur.com/Ptv1Lnh.png";
});body {
background: black;
}
#floor {
top:116px;
left:393px;
position:absolute;
margin-bottom: 10px;
height: 40px;
width: 65px;
background-image: url("http://i.imgur.com/tCuykFV.png")
}
#floor img {
position: absolute;
bottom: 12;
}
#div3 {
float: right;
border: 1px solid #CCC;
margin-bottom: 10px;
height: 200px;
width: 200px;
}
#dice {
width:56px;
height:79px;
}
#walls {
position:absolute;
top:0px;
left:0px;
width:688px;
height:338px;
border: 0px;
}<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>
<body>
<img id="walls" src="http://i.imgur.com/GA3vVPI.png">
<!-- Row Floor 1 -->
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:122px;left:392px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:138px;left:360px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:154px;left:328px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:296px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:264px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:232px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:200px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:168px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:136px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:104px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:72px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:40px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:8px;"></div>
<!-- Row Floor 2 -->
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:138px;left:424px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:154px;left:392px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:360px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:328px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:296px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:264px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:232px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:200px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:168px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:136px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:104px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:72px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:40px;"></div>
<!-- Row Floor 3 -->
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:154px;left:456px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:424px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:392px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:360px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:328px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:296px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:264px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:232px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:200px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:168px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:136px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:104px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:72px;"></div>
<!-- Row Floor 4 -->
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:488px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:456px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:424px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:392px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:360px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:328px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:296px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:264px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:232px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:200px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:168px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:136px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:104px;"></div>
<!-- Row Floor 5 -->
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:520px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:488px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:456px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:424px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:392px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:360px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:328px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:296px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:264px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:232px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:200px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:168px;"></div>
<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:136px;"></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">
<img src="https://hydra-media.cursecdn.com/habbo.gamepedia.com/8/8f/Club_sofa.png?version=376411c6afa6472a40f9495e18c51ceb" draggable="true" ondragstart="drag(event)" id="clubsofa" width="113" height="85" >
<img src="http://i.imgur.com/tBWoRg6.png" draggable="true" ondragstart="drag(event)" id="tapetsmall" width="32" height="32" >
</div>
</div>
</body>最佳答案
当你将家具拖到瓷砖上时，应该是这样的，瓷砖应该改变背景图像，看起来像这样Image here (在 Photoshop 中制作)
关于javascript - 拖放鼠标悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43698910/