当将对象从一个div拖动到另一个div时，格式将被更改 [英] When Drag a object from one div to another , format gets changed

问题描述

当一个对象从一个div拖放到另一个div时，li中的格式只会变为文本。我想要它以相同的格式和样式，即'li'放弃后。

  $（function（）{
 
 $（#catalog ul）.sortable（{
 zIndex：10000，
 revert：true 
}）; 
 $（#catalog） .accordion（）; 
 $（#catalog ul）.draggable（{
 appendTo：body，
 helper：clone，
 zIndex：10000 
 
 $ b $（#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（）{
 
 //无意中被droppa添加可以与sortable 
进行交互//使用connectWithSortable修复这个，但不允许您自定义活动/ hoverClass选项
 $（this）.removeClass（ui-state-default）; 
} 
}）; 
 
 
 $（ul，li）.disableSelection（）; 
 $（＃dialogIteration）。dialog（）; 
}）; 
  

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

解决方案

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

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

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

When a object is dragged and dropped from one div to another, the format in li gets changes to text only. I want it in the same format and style i.e 'li' after droping it.

 $(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();
    });

Demo: http://jsfiddle.net/coolanuj/7683X/7/

解决方案

I am assuming you are wanting the dropped element in the second div to retain its formatting? If so, Looking at your jsfiddle, I can see two potential issues.

1) in your droppable definition, you create a new li element, but you don't copy across the inline styles (so you lose the colour definition, etc)

2) in your CSS, you only apply the styles to the ul in the first div, and not to the ol in the second div

这篇关于当将对象从一个div拖动到另一个div时，格式将被更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！