拖放式鼠标悬停

Question

I got this drag and drop javascript, which is being used by placing furniture in a room. 我得到了这个拖放JavaScript，这是通过将家具放在房间中来使用的。 Watch on my website here. 在我的网站上观看。
I want to make so while dragging the furniture over the floor (each tile), the tile you got your mouseover will change image (Just like a mouseover/hover works). 我想这样做是在将家具拖到地板（每个图块）上时，将鼠标悬停在上面的图块会更改图像（就像鼠标悬停/悬停一样）。 How do I make this in javascript while dragging? 拖动时如何在javascript中制作此图片？

This is my code: 这是我的代码：

 $(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>

Answer 1

Since you use a background-image for each floor tile you could take the same image that was given and change the color to what you want it be when the mouse is over that tile. 由于您为每个地砖使用background-image ，因此您可以拍摄与给定的图像相同的颜色，并将颜色更改为鼠标悬停在该地砖上所需的颜色。 Then change the image back to what it originally was when the mouse leaves that tile. 然后将图像更改回鼠标离开该图块时的原始状态。

In your JS file you could then do something like the below: 然后，您可以在JS文件中执行以下操作：

var floorTiles = document.querySelectorAll("#floor");

for(var i = 0; i < floorTiles.length; i++){ 
  floorTiles[i].ondragover = function(ev) { 
    if (ev.target.id === "floor") {
      ev.target.style.backgroundImage = "https://i.imgur.com/vQ70H33.png"; 
    }
  }; 
  floorTiles[i].ondragleave = function(ev) { 
    if (ev.target.id === "floor") {
      ev.target.style.backgroundImage = "https://i.imgur.com/tCuykFV.png"; 
    }
  };
}

The way the above code works is it dynamically grabs everything in the Document Object Model (DOM) using querySelectorAll and puts it into a NodeList of elements. 上面的代码的工作方式是，它使用querySelectorAll动态获取文档对象模型（DOM）中的所有内容，并将其放入元素的NodeList中。 We then iterate over the list and attach event listeners for onmouseover and onmouseout which run when the pointer goes over the element and when the pointer leaves the element. 然后，我们遍历该列表，并为onmouseover和onmouseout附加事件侦听器，它们在指针经过元素时以及指针离开元素时运行。 When the pointer leaves the element you just want to set the backgroundImage back to the original image. 当指针离开元素时，您只想将backgroundImage设置回原始图像。

EDIT: I edited the above code to replace the background image. 编辑：我编辑了上面的代码以替换背景图像。 Since you already have an ondragover attached to all of your floor tiles you need to put this code somewhere in the function allowDrop(event) . 由于您已经将ondragover附加到所有地砖上，因此需要将此代码放在函数allowDrop(event)中的某个位置。 It should highlight your tiles when you drag over them as well. 当您将其拖到瓷砖上时，它也应突出显示瓷砖。 You can leave the mouse enter and mouse leave code since this changes the tile when your mouse passes over those tiles. 您可以保留鼠标Enter和鼠标离开代码，因为这会在您的鼠标经过这些磁贴时更改磁贴。 It's just different when you're dragging something. 当您拖动某些东西时，情况有所不同。 Hope this helps! 希望这可以帮助！

Answer 2

当您将Furni拖到瓷砖上时，应该是这样的，瓷砖应更改backgroundimage，看起来像这里的图片（在Photoshop中制作）

拖放式鼠标悬停

问题描述

2 个解决方案

解决方案1
0 2017-04-29 19:37:46

解决方案2
0 2017-04-30 09:07:22

拖放式鼠标悬停

问题描述

2 个解决方案

解决方案1 0 2017-04-29 19:37:46

解决方案2 0 2017-04-30 09:07:22

解决方案1
0 2017-04-29 19:37:46

解决方案2
0 2017-04-30 09:07:22