当将一个对象从一个 div 拖到另一个时，格式会改变答案

【问题标题】：When Drag a object from one div to another , format gets changed当将一个对象从一个 div 拖到另一个时，格式会改变
【发布时间】：2012-11-07 04:47:39
【问题描述】：

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

演示：http://jsfiddle.net/coolanuj/7683X/7/

【问题讨论】：

我试过你的演示：它不会让我进入第二个 div。它让我可以拖动以更改框中三个项目的顺序，但是当我尝试将它们放入“在此处添加您的故事”框中时，它们滑回了它们开始的位置。（因此，由于拖放不起作用，因此您提到的格式更改问题不适用。）
jsfiddle.net/coolanuj/7683X/12 @nnnnnn : 请在这里查看

标签： jquery html drag-and-drop draggable droppable

【解决方案1】：

我假设您希望第二个 div 中删除的元素保留其格式？如果是这样，看看你的 jsfiddle，我可以看到两个潜在的问题。

1) 在您的 droppable 定义中，您创建了一个新的 li 元素，但您不会复制内联样式（因此您会丢失颜色定义等）

2) 在您的 CSS 中，您只将样式应用于第一个 div 中的 ul，而不应用于第二个 div 中的 ol

【讨论】：

你是对的。我想知道要应用什么。实际上我是 HTML 新手。你能帮帮我吗？提前感谢
您是否尝试过 ui.draggable.appendTo( this ); 而不是创建新的 li 元素？ - 这将保留原始元素的所有原始 class、style、id 和其他属性。我应该补充一点，我是从理论上的 PoV 来看这个 - 我没有拖放的个人经验 :)