Question

我得到了拖放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>

Answer 1

由于您为每个地板图块使用background-image，因此您可以拍摄相同的图像并将颜色更改为鼠标悬停在该图块上时的颜色。然后将图像更改回鼠标离开该图块时的原始图像。

在您的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"; 
    }
  };
}

上述代码的工作方式是使用querySelectorAll动态抓取文档对象模型（DOM）中的所有内容，并将其放入元素的NodeList中。然后我们遍历列表并附加onmouseover和onmouseout的事件侦听器，当指针越过元素并且指针离开元素时，它们会运行。当指针离开元素时，您只想将backgroundImage设置回原始图像。

编辑：我编辑了上面的代码来替换背景图片。由于您已经将ondragover附加到所有地砖上，因此您需要将此代码放在函数allowDrop(event)中的某个位置。当你拖动它们时，它应该突出显示你的瓷砖。您可以保留鼠标输入和鼠标离开代码，因为当鼠标经过这些切片时，这会更改切片。当你拖动某些东西时，情况会有所不同。希望这有帮助！

Answer 2

将瓷器拖到瓷砖上时应该是这样的，瓷砖应该改变背景图像，看起来像这样Image here（在photoshop中制作）

拖放拖动鼠标悬停

2 个答案: