Question

I got this website...
在我的网站上，我得到了这个小绿色沙发。我需要：

1。当你开始拖动时，沙发会将图像变成绿色的大沙发？绿色大沙发的链接是this.
2。当您将沙发放在房间的地板（#floor）上时，它仍然是一个很大的沙发。
3. 如果您选择放置它再次回到桌子（＃div1），它将再次变成小绿色沙发
我的代码：

＆＃13;

$(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));
    $('#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";
});

＆＃13;

body {
    background: #0c3c66;
    height:416px;
}

#holdon {
  position: absolute;
  top: calc(50% - 235px);
  left: calc(50% - 345px);
  transform: translate(-50%, -50%);
}

#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;
    left:2;
}

#floor:hover {
    background-image: url("http://i.imgur.com/cEpWRTx.png")
}

/*
.ting:hover {
-webkit-filter: drop-shadow(1px 1px 0 white)
		drop-shadow(-1px 1px 0 white)
		drop-shadow(1px -1px 0 white)
      		drop-shadow(-1px -1px 0 white);
}
*/

#div3 {
  top:0px;
  right:0px;
  position:absolute;
  border: 1px solid #CCC;
  margin-bottom: 10px;
  height: 100%;
  width: 275px;
}

#div4 {
  top:0px;
  right:0px;
  position:relative;
  border: 1px solid #CCC;
  height: 100px;
  width: 275px;
}

#dice {
    width:56px;
    height:79px;
}

#walls {
  position:absolute;
  top:0px;
  left:0px;
  width:688px;
  height:338px;
  border: 0px;
}

#menuroom {
    position:absolute;
    top:416px;
    left:0px;
    opacity:0.5;
    background-color: #0c3c66;
    width:688px;
    height:50px;
    color: white;
}

＆＃13;

<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>
    
    <div id="holdon">

<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>

<!-- Row Floor 6 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:552px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:520px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:488px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:456px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:424px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:232px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:200px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:394px;left:168px;"></div>

<!-- Row Floor 7 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:584px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:552px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:520px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:488px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:456px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:424px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:394px;left:232px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:410px;left:200px;"></div>

<!-- Row Floor 8 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:616px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:584px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:552px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:520px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:488px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:456px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:424px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:394px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:410px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:426px;left:232px;"></div>

</div>


<div id="div3">
    
    <div id="div4">
        
        
    </div>
    
    

<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)" class="ting" 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)" class="ting" id="drag2" width="66" height="137">
  
  <img src="//cdn.habtium.com/furni/items/small/1.gif" draggable="true" ondragstart="drag(event)" class="ting" id="clubsofa" width="36" height="36" >
  
  <img src="http://i.imgur.com/tBWoRg6.png" draggable="true" ondragstart="drag(event)" id="tapetsmall" width="32" height="32" >
  
  <img src="http://habbofever.be/wp-content/uploads/2017/02/Gold_dragon_lamp.gif" draggable="true" ondragstart="drag(event)" class="ting" id="gd" width="62" height="78" >
  
  </div>
  
</div>

</body>

＆＃13;

Answer 1

<强> 1。当你开始拖动它时，沙发会将图像变成一个绿色的大沙发？

您可以使用ev.dataTransfer.setDragImage()将图片更改为大图片。

<强> 2。当您将沙发放在房间的地板（#floor）上时，它仍然是最大的。

当您调用ev.target.appendChild()时，您可以检查它是否为“floor”并附加大版本图像（如果是）。

第3。如果您选择将其重新放回桌子（＃div1），它将再次变为小绿色沙发。

这与问题2的问题相同：检查它是否为“div1”并附加小版本图像（如果是）。

这是一个简化的例子：

window.allowDrop = function(ev) {
    ev.preventDefault();
}

window.drag = function(ev) {
    var img = document.createElement("img");
    img.src = 'http://cdn.habtium.com/furni/items/big/1.gif';
    ev.dataTransfer.setDragImage(img, 10, 10);
    ev.dataTransfer.setData("ori", ev.target.id);
}

window.drop = function(ev) {
    ev.preventDefault();
    if (ev.target.id === ev.dataTransfer.getData("ori")) {
      return;
    }
    var img = document.createElement("img");
    img.id = 'targetId_' + Math.random();
    img.draggable = true;
    img.addEventListener('dragstart', drag);
    if (ev.target.id === 'div2') {
      img.src = 'http://cdn.habtium.com/furni/items/big/1.gif';
    } else if (ev.target.id === 'div1') {
      img.src = 'http://lolk3070.dk/roomtest/look/club_small.gif';
    }
    var originEle = document.getElementById(ev.dataTransfer.getData("ori"));
    originEle.outerHTML = '';
    delete originEle;
    ev.target.appendChild(img);
}

#div1 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
#div2 {
    float: left;
    width: 200px;
    height: 150px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="http://lolk3070.dk/roomtest/look/club_small.gif" draggable="true" ondragstart="drag(event)" id="drag1">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img src="http://cdn.habtium.com/furni/items/big/1.gif" width="0" height="0">

拖动时拖放更改图像

1 个答案: