JSFiddle - React, Tailwind, and code Playground

by zelenin

HTML

<h3 id="helmetSale">Товары:</h3>
				<table class="ui-droppable" id="tovarik">
<!-- добавляем data-item -->				<tbody><tr class="city_id" id="city_id"><td id="tov1" data-item="tov1" class="tovar ui-draggable"><span class="del">x</span><span class="tov_name">Камера Ауди А1</span><br><label>Цена: </label><label class="price">100</label><br><div class="kratkoe">Описание товара</div><div class="kupit">В корзину</div><div style="display: none;"><div class="box-modal"><div class="box-modal_close arcticmodal-close">закрыть</div><br>Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида</div></div></td><td id="tov2" class="tovar ui-draggable"><span class="del">x</span><span class="tov_name">Камера Ауди А1 </span><br><label>Цена: </label><label class="price">111</label><br><div class="kratkoe">Описание товара</div><div class="kupit">В корзину</div><div style="display: none;"><div class="box-modal"><div class="box-modal_close arcticmodal-close">закрыть</div><br>Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида</div></div></td><td id="tov3" class="tovar ui-draggable"><span class="del">x</span><span class="tov_name">Камера Ауди А1</span><br><label>Цена: </label><label class="price">115</label><br><div class="kratkoe">Описание товара</div><div class="kupit">В корзину</div><div style="display: none;"><div class="box-modal"><div class="box-modal_close arcticmodal-close">закрыть</div><br>Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида Камера заднего вида</div></div></td><td id="tov4" class="tovar ui-draggable"><span class="del">x</span><span class="tov_name">Камера Ауди А1</span><br><label>Цена: </label><label class="price">225</label><br><div class="kratkoe">Описание товара</div><div class="kupit">В корзину</div><div style="display: none;"><div...

CSS

img {
margin: 10px;
border:1px solid #666666;
}

.forms {
font:14px Georgia;
color: #333333;
margin-left:100px;
}
.forms input,textarea {
background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    padding-left: 8px;
    padding-top: 10px;
}
.forms .button {
background-color: #CCC;
width:120px;
height:30px;
font: bold 14px Arial;
color:#999999;
}

.tovar{
	border: 1px dashed #CCCCCC;
    cursor: move;
    float: left;
    margin: 10px 10px 10px 21px;
    padding: 10px;
    text-align: center;
    width: 160px;
	position:relative;
}


/* Стили для блока родажи */

.mycart {
    border-radius: 2px 2px 0 0;
    border-spacing: 47px;
    display: table-cell;
    margin-top: 21px;
    width: 657px;
	}



.city_id {
      display: table;height:100px;width: 655px;;
}

.highlight {
    border: 2px solid green!important;
    
}

#myclear {
   display: none;
    line-height: 38px;
    margin-top: 10px;
    text-align: center;
}

#checkout {
   border: medium none;
    cursor: pointer;
    
    margin-left: 11px;
   
	width: 175px;
}

#checkForm {
    display: block;
}

#forHelmets div, #mycart div {
	float: left;
}


#bound{width:700px;border:2px dashed #ccc;padding:10px}


#korz{border:2px dashed #ccc;height: 100px;}
#tovarik{border: 2px dashed #CCCCCC;
    height: 100px;}
	
	
	
	
.b-close{border-radius: 7px 7px 7px 7px;
    box-shadow: none;
    font: bold 131% sans-serif;
    padding: 0 6px 2px;
    position: absolute;
    right: -7px;
    top: -7px;
	background-color: #2B91AF;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;}
.b-close:hover{background:#1e1e1e;color:#fff;}

.kratkoe{cursor:pointer}

.polnoe {
    width: 300px;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 1px 1px 3px #B1B1B1;
    padding: .1em 1.5em;
    margin: .5em 0;
    text-align: justify;
    text-indent: 15px;
    border: solid 1px...

JavaScript

$(document).ready(function () {
    $('#tovarik td').draggable({

						containment: '#bound', //ограничение области за которую объект не должен выходить
						revert: 'invalid', //возвращаем назад изображение если оно не положено в контейнер
						helper: 'clone', //делаем чтобы перетаскиваемый элемент был на месте а его клон двигался
						cursor: 'move' //придаем курсору крeстообразный вид
					});
    //////////////////////////////////////Корзина//////////////////////////////
var helmetsCount = 0;
var summa = 0;


$('#korz').droppable({ //делаем корзину объектом которая 
		accept: '#tovarik td', // набор элементов которые можно перемещать в корзину
		activeClass: 'highlight',
				drop:	function(event,ui){ //определяет что делать с элементом который перемещен в блок
				helmetsCount++;
				if(helmetsCount > 0){$('#myclear').show();}
				$('#helmetsCount strong').text(helmetsCount);
				
				var helmet = $(ui.draggable); // помещаем объект который нам принесли в переменную  helmet (текущий элемент с которым произведено действие)
				summa += parseInt(helmet.find(".price").html()); //прибавляем к сумме сумму текущего элемента
				$('#helmetsSumm strong').text(summa);
				helmet.fadeOut(200,function(){ // прячем объект в том месте где он был раньше
					
					$(this).appendTo('#korz').fadeIn(300); //перемещаем его в корзину
				$(this).find('.kupit').hide(); // скрыть кнопку "В корзину"
				$(this).find('.del').show();
				
				
				
						
				});	
				
				}
				
});
////////////////////////////////Блок - полка товаров
$('#tovarik').droppable({ 
				accept: '#korz td[id*=tov]', //Указываем что только добавлять можно шлемы, ничего кроме
				activeClass: 'highlight', //подсвечиваем блок
				drop:	function(event,ui){ //определяет что делать с элементом который перемещен в блок
				helmetsCount--;
				if(helmetsCount == 0){$('#myclear').hide();}
				$('#helmetsCount strong').text(helmetsCount);
				
				var helmet2 = $(ui.draggable); // помещаем объект который нам...