javascript - 将家具拖放到房间中-6ren

javascript - 将家具拖放到房间中

转载作者：太空宇宙更新时间：2023-11-04 13:04:58

26

4

我得到了这个房间，还有一些家具。
1.我希望在放下家具时，家具在地板上方而不是地板下方。
2.我想交换家具，所以当你把家具放到地板上时，已经有家具的地方应该交换位置。

This is what I have made for now...

我的代码:

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

最佳答案

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

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

关于javascript - 将家具拖放到房间中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43677588/

26

4

0

文章推荐： css - 使所有列表组元素的大小相同

文章推荐： html - CSS 置换两行字符串

文章推荐： java通知所有: illegalMonitorStateException

文章推荐： c++ - 基于 SDL2 的游戏和 GADBannerView

android - 找不到实现(房间)
我在使用 Room 或 idk 时遇到问题，实际上问题出在哪里，我需要帮助找出问题出在哪里，我正在使用 Hilt DI，创建数据库实例的那一刻它崩溃了这是我的代码错误 E/AndroidRuntim
java - 房间/节点导航和管理连接
我有一个关于数据结构和类设计的问题(抱歉太长了)。为了简单起见，假设这是一个游戏，我想在房间之间导航(想象一系列 2D 非滚动屏幕，例如早期的银河战士/恶魔城)。每个房间可以有许多导出(例如上、下、左
java - 如何根据数据库在特定日期更新按钮(房间)？
我使用当前日期(1-25)作为父ID并使用房间(08-00_11-00_karpet1-)作为 child ID。该数据库中包含在该日期(父 ID)订购该房间(子 id)的用户信息。问题1 使用此布
android - 房间。第一个查询返回空值
在我的 Android 项目中，我使用 Room 库来处理 SQLite 数据库。我使用我的数据库来保存国家电话代码。我的数据库预装了两个国家(观看 populateDatabaseWithCount
java - 房间 - 编译器消息文件损坏
我正在尝试将 Room 持久性库添加到 Android 应用程序项目中。在 build.gradle 文件中，我添加了以下依赖项: implementation 'android.arch.persi
algorithm - 房间/时间段调度优化
人们可以提前从 25 场讲座中选择最多 5 场。所有这些讲座都在五个房间的五个时间段内在一天内进行。听众可以参加的每个(首选)讲座都让她更快乐，他选择但不能参加的每个讲座(因为另一个首选讲座在同一时间
Android:房间:没有加密和安全性？
我在 Android 上使用 OrmLite 而不是 SQLite 和 SQLCipher 来加密数据库。有没有办法加密 Room 数据库？最佳答案默认情况下，Room 将数据存储在应用程序的内部
android - 房间;将整数数组存储到单独的表中？
使用 Room ORM，我使用 @Entity 注释声明了一个实体 EQPreset。该实体包含一个数组 int[]。它给出以下错误: 错误:无法确定如何将此字段 (int[] arr) 保存到数据库
database - 房间/人员管理应用程序数据库结构
我正在尝试构建一个管理 child 托儿所的应用程序，特别是管理哪个 child 在哪个时间点在托儿所的哪个房间里。 Nursery 链式店有多个分支机构。每个分店有几个房间，每个房间对应一个年龄段，
android - 房间 android 数据库被锁定
我在生产环境中遇到了“android.database.sqlite.SQLiteDatabaseLockedException”异常。错误分析时出现异常。我的项目数据库有空间。项目中没有使用多进程。
Android 房间 rawquery 问题
我想实现 Android Room 持久性。这是我的 DAO 界面。 @Dao interface FoodDao { /** * Returns all data in tabl
java - 房间 - LiveData 未触发
我正在尝试使用 Room 数据库和 LiveData。我有 ViewModels，它保存从 dao 获得的 LiveData。如果我更新Transaction ，然后LiveData>观察正常，但是
java - 参与者数量有限的 Firebase 房间
在 Firebase ，创建“房间”(例如用于聊天)很容易，正如其各种示例中所记录的那样。对于聊天的数据结构，我会使用这样的东西: rooms room1 member_co
java - RxJava插入并返回Id方法(房间)调试
我试图从 Activity 中将一行插入 SQLITE 数据库，然后返回要存储在 Activity 中的变量中的 rowId。请参阅下面我使用的方法和逻辑。 private void insert
iOS XMPPFramework - 房间/聊天消息历史
我正在使用 XMPPFramework 开发聊天应用程序加入现有房间后如何接收消息历史记录？现在我像这样加入房间: XMPPJID *roomJid = [XMPPJID jidWithStrin
java - ConcurrentModificationException 房间 Android
我在我的应用程序中使用 Room 并将数据插入到我的数据库中时 ConcurrentModificationException有时会被抛出。为什么会这样？我使用分页 api，在每次 api 调用后，
android - 房间 : Crash on emulator
我想为 pb 添加值，由于将 pb_value 包含到实体中，应用程序崩溃了。我是学习室的新手，我不确定将额外项目合并到数据库中的正确方法。 E/AndroidRuntime: FATAL EXCEP
android - 房间 : Conflicting Declarations
我想在当前 pb 中添加值、日期和详细信息。我在 pbInfo 的数据库中收到错误“冲突声明”。我应该如何修复此错误？ @Entity(tableName = "pb_table") data cla
ios - 在加入他们之前组织字符串以创建公共(public)房间
我正在尝试制作一个聊天应用程序，用户可以在其中聊天。我想将两个用户 uid 字符串插入函数并返回一个连接的字符串。但我希望以某种方式组织 uid，以便返回的值始终相同。 func (id1, id2)
android - 房间 ORM 枚举类型转换器错误
我不断收到以下错误: Cannot figure out how to save this field into database. You can consider adding a type co

首页

博学

6Ren·AI

商城

javascript - 将家具拖放到房间中