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;
}

...

在将其拖动到新容器并将其删除后，您创建了另一个元素来保存与原始元素不具有相同className的内容$("<li></li>").text(ui.draggable.text())，因此样式将被删除。

您可以通过将其更改为

来修复它

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

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

1 个答案: