Drag and drop the sausage dog on the bun!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<section>
<h2>Tutorial 1</h2>
<p>Drag and drop the sausage dog on the bun!</p>
<div class="bun"><img src="images/bun.png"></div>
<div class="drag_sausage"><img src="images/sausage.png"></div>
</section>
section {
width: 960px;
min-height: 600px;
margin: 160px auto 0;
position: relative;
}
section h2 {
text-align: center;
font-size: 36px;
}
section p {
text-align: center;
font-size: 24px;
margin-top: 10px;
}
.bun {
position: absolute;
left:135px;
top: 100px;
}
.drag_sausage {
position: absolute;
left: 135px;
top: 310px;
z-index: 999;
}
.drag_sausage img {
cursor: pointer;
}
$(function() {
$( ".drag_sausage" ).draggable(
{drag: function(){
$(".drag_sausage img").attr("src","images/sausage_animation.gif");
}
});
$( ".bun" ).droppable({
drop: function(){
$( this )
$(".bun img").attr("src","images/hot_dog.png");
$(".drag_sausage img").remove();
$("section p").html("Sausage dog in the bun! Please refresh to start again.")
}
});
});