JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="dd">
        <img src="http://www.msagb.com/msablog/wp-content/uploads/2015/02/Gold-Star.jpg" alt="Photo gallery image" id="5" draggable="true" width="100" height="100" ondragstart="drag(event)" />
        </br>
        <img src="http://petattack.com/wp-content/uploads/2014/07/little_cute_cat_1920x1080.jpg" alt="Photo gallery image" id="6" draggable="true" width="100" height="100" ondragstart="drag(event)" />
        </br>
        <img src="http://www.terrafloraonline.com/images/userfiles/images/flower01LOW.png" alt="Photo gallery image" id="7" draggable="true" width="100" height="100" ondragstart="drag(event)" />
    </div>
    <div id="gallery" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="http://html.net/tutorials/javascript/images/1.jpg" alt="Photo gallery image" id="photo" />
        <input type="button" id="btnStart" value="Restart gallery" />
        <input type="button" id="btnStop" value="Stop gallery" />
        <input type="text" name="name" id="name">
        <br>
        <input type="button" id="btnSub" value="User gallery" />
    </div>
</body>

CSS

#gallery {
		     width:100%;
    float:left;
    clear:left;
		     height:378px;
		     margin: 0 auto;
		     border:2px solid #ccc;
		 }
		 #dd {
		     float:right;
		 }

JavaScript

var images = ["http://html.net/tutorials/javascript/images/1.jpg", "http://html.net/tutorials/javascript/images/2.jpg", "http://html.net/tutorials/javascript/images/3.jpg", "http://html.net/tutorials/javascript/images/4.jpg"];

		var preloadedImgs = [];

		function allowDrop(ev) {
		    ev.preventDefault();
		}

		function drag(ev) {
		    ev.dataTransfer.setData("text", ev.target.id);
		}

		function drop(ev) {
		    ev.preventDefault();
		    var data = ev.dataTransfer.getData("text");
            var imagePath = document.getElementById(data).getAttribute('src');
            var droppedImage = new Image();
            droppedImage.src = imagePath;
 preloadedImgs.push(droppedImage);
		    ev.target.appendChild(document.getElementById(data));
		}


		var curImage = document.getElementById("photo");
		var galleryStarter;
		var isGalleryOn = true;

		var counter = 0;

		function init() {
		    for (var i = 0; i < images.length; i++) {
		        preloadedImgs[i] = new Image();
		    }
		    for (var i = 0; i < preloadedImgs.length; i++) {
		        preloadedImgs[i].src = images[i];
		    }
		    var btnStart = document.getElementById("btnStart");
		    var btnStop = document.getElementById("btnStop");


		    btnStart.onclick = startGallery;
		    btnStop.onclick = stopGallery;

		    if (isGalleryOn) {
		        startGallery();
		    }
		}
		onload = init;

		function startGallery() {
		    curImage.src = preloadedImgs[counter].src;
		    counter++;
		    if (counter == preloadedImgs.length) {
		        counter = 0;
		    }
		    galleryStarter = setTimeout("startGallery()", 2000);
		    isGalleryOn = true;
		}

		function stopGallery() {
		    clearTimeout(galleryStarter);
		    isGalleryOn = false;
		}