Question

我有以下HTML，其中包含4个<div>＆＃39; s - 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>

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

Answer 1

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

然后，您可以使用this的{{3}}事件处理程序来更改背景颜色。在处理程序内，您可以使用ui.draggable访问droppable并使用$(".color").draggable({ revert:true }); $(".door").droppable({ drop: function(e, ui) { console.log(ui.draggable) $(this).css("background-color", ui.draggable.attr("id")); } });拖动元素，如下所示：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

附注：我已经删除了内联css并使用了css类，因此您可以避免重复样式并保持HTML清洁。您可以阅读有关drop

的更多信息

Answer 2

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

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

2 个答案: