title: drag and drop elements with jQuery
body: <p>Maybe can you help me, i would like to create one column with dragable (not clone) divs, which i can put into the container, which consists of four divs (bootstrap col-md-3). Dragable elements have two sizes: col-md-3 or col-md-6. I found something similar (<a href="http://jsfiddle.net/py3DE/" rel="nofollow noreferrer">http://jsfiddle.net/py3DE/</a>) but i cant rewrite it to work properly</p>
  
  <pre><code>    $(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone',
      start: function(ev, ui){ ui.helper.width($(this).width()); }                    // ensure helper width
  });
  
  $(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight',
      drop: function(ev, ui){
          var item = ui.draggable;
          if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
          this.innerHTML = '';                                                        // clean the placeholder
          item.css({ top: 0, left: 0 }).appendTo(this);                                // append item to placeholder
      }
  });
  
  $(".target").on('click', '.closer', function(){
      var item = $(this).closest('.item');
      item.fadeTo(200, 0, function(){ item.remove(); })
  });
  </code></pre>