Question

我有这个房间和一些家具 1。我想在放下家具时家具在地板上而不是在地板下面。
2。我想更换家具，所以当你将家具放在已经有家具的地板上时，它应该换位。

我的代码：

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

Answer 1

为拖动的图片添加以下样式

#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>

将家具拖放到房间里

1 个答案: