JSFiddle - React, Tailwind, and code Playground

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">
<div class="order_body">
    <div id="drag" class="column">
        <div class="item" 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">10000р.</p></td>
                </tr> </table>
            <div class="close_box"></div>
        </div>
        <div class="item" 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">СТАНДАРТ1</p></td>
                    <td style="width:100%"><p class="price">10000р.</p></td>
                </tr> </table>
            <div class="close_box"></div>
        </div>
    </div>
    <div id="drop" class="column2">        
  
    </div>
  <p class="shadow_text">Перетащите сюда те услуги, которые хотите преобрести</p>  
</div>

CSS

table, tr, td {
border:0px !important;
}
#drag, #drop {
    border: 2px solid #B4B4B4;
    border-style: dashed;
    display:inline-block;
}
#drag {
    width:500px;
    height:500px;
    position:absolute;
    top:20px;
    left:20px;
}
#drop {
    width:300px;
    height:500px;
    margin-left:100px;
    position:absolute;
    left:550px;
    top:20px;
}
.shadow_text {
    position: absolute;
    text-transform: uppercase;    
    font-family: 'Open Sans';
    font-size: 14px;
    text-align: center;
    top: 228px;
    width: 250px;
    left: 679px;
    z-index:-1;
}
.item {
    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;
    height: 25px;
}
.item p {
    color: #FFF;
    font-family: 'Open Sans';
}
.p_item {
    letter-spacing: 3px;
    left: 0px;
    top: -2px;
    position: relative;
    text-transform: uppercase;
}
.item:active, .item p:active {
cursor:move;
}
.order_body {
    position:relative;
}
.ui-draggable-dragging {
    width:470px;
}
.move {
    padding:5px;
}
.price {
    position: relative;
    top: -1px;
    letter-spacing: 1px;
    font-size: 18px;
    text-align:right;
    cursor:auto;
}
.ui-highlight {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 15px 15px;
    height: 34px;
    border: 1px solid #B4B4B4;
    border-style:...

JavaScript

$( "#drop" ).sortable({
    revert: true,
    helper: 'clone',
    placeholder: "ui-highlight"
});
$('.item').draggable({
    connectToSortable: '#drop',
    helper: 'clone',
    revert: 'invalid',
    handle: ".move , .p_item",
    start: function(event, ui) {$('.ui-draggable-dragging').animate({width: "260"}, 650);},
    stop: function(event, ui) {
        $('.ui-draggable-dragging').removeAttr("id");
    } 
});

$('.item').click(
    function() {
        console.log('1');
    }
);