Jquery UI Drag n Drop

HTML

<!-- The left box -->
<ul class="side_bar">
    <li id="left-box" class="side_bar_element">
        <div class="preview">Item 1 (drag me)</div>
        <div class="content">1 The content that i want to copy</div>
    </li>
    <li id="left-box" class="side_bar_element">
        <div class="preview">Item 2 (drag me)</div>
        <div class="content">2 The content that i want to copy</div>
    </li>
    <li id="left-box" class="side_bar_element">
        <div class="preview">Item 3 (drag me)</div>
        <div class="content">3 The content that i want to copy</div>
    </li>
</ul>
<br>Please drag the elements to this box
<br>
<!-- the right box wrapper for dropped elements-->
<div id="right-box" class="wrapper">
    <div>

CSS

ul.side_bar li {
    list-style: none;
    display: block;
    margin-top: 10px;
    font-size: 1.2em;
    display: block;
    padding: 5px;
    text-align: center;
    background-color: #53D4F3;
}
#left-box .content {
    display: none;
}
.wrapper {
    min-height: 400px;
    background-color: rgba(154, 210, 148, 1);
}

JavaScript

$('document').ready(function () {

    $('.side_bar_element').draggable({
        connectToSortable: ".wrapper",
        helper: "clone",
        opacity: 0.55,
        zIndex: 100,
        stop: function (event, ui) {}
    });

    $(".wrapper").sortable({
        revert: true,
        receive: function (event, ui) {
            $(this).find('li.side_bar_element').each(function () {
                var html = $(this).children(".content").html();
                $(this).replaceWith(html);
            });
        }
    });
});