JQuery UI droppable draggable HTML got corrupted after several drags and drops

Question

After several drags and drops, both areas (draggable- left side, droppable - right side) got changed. HTML changes on some sections on both areas (sometimes only left or only right area changes). It seems like all the sudden there are no margins between some elements and background becomes blue.

Is it possible to refresh somehow draggable / droppable areas?

Example is here

Code for draggable - droppable:

$(function(){

  $(".draggable").draggable({
     revert: "invalid",
    stack: ".draggable",
    helper: 'clone'

  });

  $('.droppable').droppable({
  accept: ".draggable",
  drop: function(event, ui) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // Move draggable into droppable
    draggable.clone().appendTo(droppable);
    draggable.css({float:'left'});
  }
});


})

Answer 1

The problem is the float that some divs receive and others not. Either you add the following to your css:

.draggable {
    float: left;
}

you delete your float altogether or you add the clear:left attribute for all other divs.

If you add the CSS part you can leave out that line:

draggable.css({float:'left'});

in your js-file.