将对象从一个div拖放到另一个div时如何保留格式

Question

当一个对象从一个 div 拖放到另一个 div 时，li 中的格式只会更改为文本。我希望它具有相同的格式和样式，即删除后的“li”。

$(function() {

      $("#catalog ul").sortable({
        zIndex: 10000,
        revert: true
      });
      $("#catalog").accordion();
      $("#catalog ul").draggable({
        appendTo: "body",
        helper: "clone",
        zIndex: 10000
      });

      $("#dialogIteration ol").droppable({

        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",

        drop: function(event, ui) {
          $(this).find(".placeholder").remove();
          $("<li></li>").text(ui.draggable.text()).appendTo(this);
        }
      }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {

          // gets added unintentionally by droppable interacting with sortable
          // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
          $(this).removeClass("ui-state-default");
        }
      });


      $("ul, li").disableSelection();
      $("#dialogIteration").dialog();
    });

Sample Code here

Answer 1

原始列表中<li class="ui-state-default"/>的样式由CSS规则定义：

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  border: 1px solid lightGrey;
  background: #E6E6E6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
  font-weight: normal;
  color: #555;
}

...

将它拖到新容器中并放下它后，您创建了另一个元素来保存 $("<li></li>").text(ui.draggable.text()) 的内容，它与原始元素的 className 不同，因此样式被撕掉了。

您可以通过将其更改为来修复它

$('<li class="ui-state-default" />').text(ui.draggable.text()).appendTo( this )