CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-ui-draggable
George
George

Reputation: 27

jQuery drag and drop colour div to change background of another

I have the following HTML, containing 4 <div>'s - 2 are doors and 2 are colors, as you can guess from their id.

I'd like to be able to drag either colour to either door (such as blue on the left door and black on the right) and change the background colour on the style.

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

I'd be grateful even if someone could point me in the right direction at least.

Upvotes: 1

Views: 5507

Answers (2)

T J
T J

Reputation: 43156

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:

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

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

Upvotes: 4

user2755150
user2755150

Reputation:

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.

Upvotes: 0

Related Questions