Jquery UI Drag n Drop

by Itay

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;
}

#right-box .preview, #left-box .content {
    display: none;
}
#right-box .content, #left-box .preview {
    display: block;
}

.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();
    
});