JSFiddle - React, Tailwind, and code Playground

by hollanditkzn

HTML

<div class="row">
	<div class="col-sm-6">
		<div id="KonstrModul">
			<div id="blockColor">
				<img id="urlAdress" class="draggable" src="">
				<img id="imgageKonstr" src="http://futbolka/image/mujskaya_futbolka_constr.png">
			</div>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="konstHead">
			<h2>Сделай дизайн за минуту и скачай</h2>
			<div class="row">
				<div id="typ">
					<div id="textTyp">Тип</div>
					<input type="radio" id="option1" name="scr" class="radioKonst" value="image/mujskaya_futbolka_constr.png" hidden checked><label for="option1">Футболка</label>
					<input type="radio" id="option2" class="radioKonst" name="scr" value="image/mujskaya_mayka_constr.png" hidden><label for="option2">Майка</label>
					<input type="radio" id="option3" class="radioKonst" name="scr" value="image/mujskaya_polo__constr.png" hidden><label for="option3">Поло</label>
					<input type="radio" id="option4" class="radioKonst" name="scr" value="image/jenskiy_svitshot_constr.png" hidden><label for="option4">Свидшот</label>
					<input type="radio" id="option5" class="radioKonst" name="scr" value="image/hood_constr.png" hidden><label for="option5">Худи</label>
				</div>
				<div class="color">
					<div id="textImages">Изображение</div>
					<div id="colorBox">
						<div id="colorText">Цвет:</div>
						<input type="radio" id="color1" name="color" class="radioColor" value="#ffffff" hidden checked>
						<label for="color1" class="color-change-block" style="background-color: #fff;"></label>
						<input type="radio" id="color2" name="color" class="radioColor" value="#d9534f" hidden>
						<label for="color2" class="color-change-block" style="background-color: #d9534f;" ></label>
						<input type="radio" id="color3" name="color" class="radioColor" value="#5cb85c" hidden>
						<label for="color3" class="color-change-block" style="background-color: #5cb85c;"></label>
						<input type="radio" id="color4" name="color" class="radioColor" value="#f0ad4e"...

CSS

#KonstrModul{
	width: 93%;
	border: 3px dashed #000000;
	position: relative;
	overflow: hidden;
}
#KonstrModul #imgageKonstr{
	width: 100%;
	z-index: 3;
	position: relative;
	cursor: pointer;
}
#urlAdress{
	position: absolute;
	display: block;
	transform: rotate(0deg) scale(0.51);
}

JavaScript

$(document).ready(function(){
					$(".radioKonst").change(function(){
						if (this.checked) {
							$("#imgageKonstr").attr("src", this.value);
						}
					});
					$(".radioColor").change(function(){
						if (this.checked) {
							$("#KonstrModul #blockColor").css("background-color", this.value);
						}
					});

					$("#fileForm").on("change",function(e){
						e.preventDefault();
						var fromData = new FormData($(this)[0])

						$.ajax({
							url: "unloade.php",
							type: "POST",
							data: fromData,
							dataType: "json",
							processData: false,
							contentType: false,
							success: function (data){
								$("#imageDownload").text(data.url);
								$("#urlAdress").attr("src", data.url);
								alert("Отправлено"+data.url);
							}	
						});
					});
				});
				window.addEventListener("DOMContentLoaded", function(){
					var image = document.getElementById('urlAdress');
					var cropper = new Cropper(image, {
						movable: false,
						zoomable: false,
						rotatable: false,
						scalable: false
					});
					document.getElementById("fileForm").onclick = function(){
						cropper.replace(data.url);
						alert(data.url)
					}
				})
        $(function(){
					$(function () {
					    $('body').on('mousedown', '.draggable', function (e) {
					        if ($(this)[0] === $(e.target)[0]) { // not for inner elements
					            var offset = $(this).offset();
					            var grabX = e.pageX - offset.left;
					            var grabY = e.pageY - offset.top;
					            $(this).addClass('dragged').parents().on('mousemove', function (e) {
					                $('.dragged').offset({
					                    top: e.pageY - grabY,
					                    left: e.pageX - grabX
					                }).on('mouseup', function () {
					                    $(this).removeClass('dragged');
					                });
					            });
					            e.preventDefault();
					            //e.stopPropagation();
					       ...