JQuery UI droppable draggable HTML 在多次拖放后损坏

Question

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

是否可以刷新可拖放区域？

例子是here

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

问题是一些 div 收到而另一些则没有。您可以将以下内容添加到 css:

.draggable {
    float: left;
}

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

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

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

在你的 js 文件中。