JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div id="dragcontainer" style="height:400px; width:400px;">
    <div id="container" style="height:400px; width:400px; background:#333;">
        <img src="http://i.imgur.com/jbG4nzS.jpg" />
    </div>
</div>

CSS

body{
    overflow:hidden;
}

JavaScript

var zoomEnable = true;
		var zoomLevel = 1;

		$(document).ready(function(){
			$('#container').on('mousewheel', function(e){
					
				if(zoomEnable == true){
					
					zoomEnable = false;
					if(e.originalEvent.deltaY < 0){
						zoomLevel = zoomLevel < 2 ? zoomLevel+= 0.2 : zoomLevel;
						$(this).stop().animate({ 'zoom': zoomLevel }, 200, function(){
							zoomEnable = true;
						});
					}else{
						zoomLevel = zoomLevel > 0.4 ? zoomLevel-= 0.2: zoomLevel;

						$(this).stop().animate({ 'zoom': zoomLevel }, 200, function(){
							zoomEnable = true;
						});
					}
				}

			});
			
			$('#dragcontainer').draggable();
		});