jQuery拖放颜色div来改变另一个背景答案

【问题标题】：jQuery drag and drop colour div to change background of anotherjQuery拖放颜色div来改变另一个背景
【发布时间】：2014-12-20 17:53:18
【问题描述】：

我有以下HTML，包含 4 个<div> - 2 个是门，2 个是颜色，你可以从他们的 id 猜到。

我希望能够将任一颜色拖动到任一门（例如左侧门为蓝色，右侧为黑色）并更改样式的背景颜色。

<div id="door1" style="background: #fff;"></div>
<div id="door2" style="background: #fff;"></div>
<div id="black"></div>
<div id="blue"></div>

即使有人至少能指出我正确的方向，我也将不胜感激。

【问题讨论】：

.draggable 是实现这一目标的方法，您的问题到底是什么？

标签： javascript jquery css jquery-ui jquery-ui-draggable

【解决方案1】：

在“可拖动”的停止事件中，检查哪个 div 是目标（获取被拖动 div 的 'left' 和 'top' 属性）并使用被拖动 div 的颜色绘制它。

【讨论】：

【解决方案2】：

您应该分别使用.draggable() 和.droppable() 方法将颜色<div> 初始化为draggable 并将门<div> 初始化为droppable 小部件。

然后您可以使用droppable 的drop 事件处理程序来更改背景颜色。在处理程序中，您可以使用this 访问droppable，使用ui.draggable 访问拖动元素，如下所示：

$(".color").draggable({
  revert:true
});
$(".door").droppable({
  drop: function(e, ui) {
    console.log(ui.draggable)
    $(this).css("background-color", ui.draggable.attr("id"));
  }
});

.door {
  display: inline-block;
  width: 50px;
  height: 120px;
  border: 1px solid;
  margin: 5px;
}
.color {
  float: right;
  width: 50px;
  height: 50px;
}
.white {
  background: #fff;
}
#black {
  background: #000;
}
#blue {
  clear: left;
  background: royalblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="door1" class="door white"></div>
<div id="door2" class="door white"></div>
<div id="black" class="color"></div>
<div id="blue" class="color"></div>

旁注：我已删除内联 css 并使用 css 类，这样您就可以避免样式重复并保持 HTML 干净。你可以阅读更多关于Why Use CSS @ MDN

【讨论】：