css - 将对象从一个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();
    });

示例代码在这里

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 )