See how to do it

Step1.Include the link below to use JQuery in your code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Step2.Download CSS and Javascript files from JQuery UI.

Step3.Attatch those CSS and Javascript files to your code.

Step4.Make your code like the below.

HTML

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

CSS

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

JavaScript

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