JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://cougardesign.ru/templates/cougarnest/css/layout.css">
<link rel="stylesheet" href="http://cougardesign.ru/templates/cougarnest/css/beez5.css">
<script src="http://cougardesign.ru/templates/cougarnest/javascript/jQueryRotate.2.1.js"></script>
<div class="order_main">
<div class="order_body" id="order1">
    <div id="drag" class="column">
                 <div class="item bussines" id="item1">
            <table class="label"> <tr>
                    <td><img src="http://cougardesign.ru/templates/cougarnest/images/move.png" class="move" alt="" /></td>
                    <td><p class="p_item">Бизнес</p></td>
                    <td style="width:100%"><p class="price">50000р.</p></td>
                </tr> </table>
            <div class="close_box hidden"><img src="http://cougardesign.ru/templates/cougarnest/images/close_delete.png" alt="" /></div>
        </div>
        <div class="drop_box bussines" id="box1">
            <ul class="">
               <li>CMS на выбор</li>
                <li>Модули нашей разработки</li>
                <li>Домен в подарок</li>
                <li>от 200 GB места</li>
                <li>Хостинг на год</li>
                <li>Лучшие сервера</li>
                <li>Почта</li>
                <li>Регистрация в каталогах</li>
                <li>Продвижение в поисковых сетях</li>
                <li>Продвижение в социальных сетях</li>
                <li>Техническая поддрежка</li>
            </ul>
        </div>
         <div class="item" id="item2">
            <table class="label"> <tr>
                    <td><img src="http://cougardesign.ru/templates/cougarnest/images/move.png" class="move" alt=""/></td>
                    <td><p class="p_item">РАСШИРЕННЫЙ</p></td>
                    <td style="width:100%"><p class="price">20000р.</p></td>
                </tr> </table>
            <div class="close_box hidden"><img src="http://cougardesign.ru/templates/cougarnest/images/close_delete.png"...

CSS

.order_main table, tr, td {
border:0px !important;
}
.order_body {
    position:relative;
    width: 950px;
}
.hidden {
    display:none;
}
#drag, #drop {
    border: 2px solid #B4B4B4;
    border-style: dashed;
    display:inline-block;
}
#drag {
    width:500px;
    position:absolute;
    top:20px;
    left:20px;
    padding-bottom:15px;
}
#drop {
    width: 330px;
    min-height: 245px;
    padding-bottom: 45px;
    padding-right: 4px;
}
#drop_body {
    width: 340px;
    position: absolute;
    left: 500px;
    top: 20px;
    margin-left:100px;
}
.shadow_text {
    position: absolute;
    text-transform: uppercase;    
    font-family: 'Open Sans';
    font-size: 14px;
    text-align: center;
    top: 183px;
    width: 250px;
    left: 646px;
    z-index:-1;
}
.item {
    position:relative;
    background: #08A1D8;
    background: -moz-linear-gradient(-45deg, #08A1D8 0%, #258DC8 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#08A1D8), color-stop(100%,#258DC8));
    background: -webkit-linear-gradient(-45deg, #08A1D8 0%,#258DC8 100%);
    background: -o-linear-gradient(-45deg, #08A1D8 0%,#258DC8 100%);
    background: -ms-linear-gradient(-45deg, #08A1D8 0%,#258DC8 100%);
    background: linear-gradient(135deg, #08A1D8 0%,#258DC8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08a1d8', endColorstr='#258dc8',GradientType=1 );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 15px;
    margin-right: 24px !important;
    height: 25px;
    margin-bottom: 0px;
}
.item:first-child {
   margin: 15px; 
   margin-bottom: 0px;
}
.item p {
    color: #FFF;
    font-family: 'Open Sans';
}
.p_item {
    letter-spacing: 3px;
    left: 0px;
    top: -2px;
    position: relative;
    text-transform: uppercase;
}
.ui-draggable-dragging {
    z-index: 1;
}
.move {
    padding:5px;
}
.price {
    position: relative;
    top: -1px;
    letter-spacing: 1px;
   ...

JavaScript

$('.show_price').hide('fade',1);

$( "#drop" ).sortable({
    revert: true,
    helper: 'clone',
    placeholder: "ui-highlight",
    change: function(event, ui) {
    conversion (ui);
    }
});
if ($('#order1').is(":hidden") == false) {
    $('.item').draggable({
        connectToSortable: '#drop',
        helper: 'clone',
        revert: 'invalid',
        handle: ".move , .p_item",
        distance: 40,
        start: function(event, ui) {
            $('.ui-draggable-dragging').animate({width: "280"}, 650);
        },
        stop: function(event, ui) {
            $('.ui-draggable-dragging').removeAttr("id");
            conversion (ui,'drag');    
        } 
    });
};
$('.item').click(function() { // сворачиваем или разворачиваем описание
    var id_numb = $(this).attr('id');
    var id_start = $(this).attr('id');
    id_numb = id_numb.replace("item","#box");
    if (id_numb != 'null' && $(id_numb).attr('style') != 'display: block;') {       
    $('.drop_box').hide('blind',600);
    $(id_numb).show('blind',600);
    }
});
$('#drop').on('click','.close_box', // удаляем товары
    function() {
    var a = parseInt($(this).parent().find('.price').text());
    var b = parseInt($('.show_price_val').text());
    var c = b - a;
    var item = this;
    $('.show_price_val').text(c + 'р.');
    $(this).parent().hide('blind', 500);
    if (c == '0') {
        $('.show_price').hide('fade',500);
    }
    setTimeout(function(){$(item).parent().remove();},1000);
});
function conversion (ui,start) { // отслеживаем события и меням цены
    $('#drop').find('.close_box').show('fade',900);
    var sum = 0;
    var els = $('#drop').find('.price');
    var arr = els.map(function(i,el) {
    return parseInt($(el).text());
    }).get();
    for (var i = 0; i < arr.length; i++) {sum += arr[i];}
    if (start != 'drag') {var b = parseInt($(ui.item).find('.price').text());sum = sum - b;}
    if (arr.length == 2) {$('#cart_icon').fadeTo(300, 0.2);}
    if (arr.length == 4)...