jQuery drag and drop colour div to change background of another

You should initialize your color <div>'s as draggable and door <div>'s as droppable widgets using .draggable() and .droppable() methods respectively.

Then you can use the drop event handler of droppable for changing the background color. Inside the handler, you can access the droppable using this and dragged element using ui.draggable as shown below:

  drop: function(e, ui) {
    $(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>

Side note: I've removed the inline css and is using css classes, So that you can avoid duplication of styles and keep your HTML clean. You can read more about Why Use CSS @ MDN

On the stop event of "draggable" check which div was the target (getting 'left' and 'top' attributes of the div that was dragged) and paint it with the color from the div that was dragged.