几次拖放后，JQuery UI可放置的可拖动HTML被破坏了

Question

经过几次拖拉，两个区域（可拖动 - 左侧，可放置 - 右侧）都发生了变化。两个区域的某些部分的HTML更改（有时仅左侧或仅右侧区域更改）。似乎突然间某些元素之间没有边距，背景变成蓝色。

是否有可能以某种方式刷新可拖动/可放置的区域？

示例是here

可拖动代码 - 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

问题在于某些div接收的浮动而其他没有。您可以将以下内容添加到css中：

.draggable {
    float: left;
}

你完全删除你的浮动，或者为所有其他div添加clear：left属性。

如果添加CSS部分，可以省略该行：

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

在你的js文件中。