2

オブジェクトをある 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();
    });

サンプルコードはこちら

4

1 に答える 1

0

元のリストのアイテムのスタイルは<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 )
于 2012-11-14T07:40:19.453 に答える