显示输入项的 jQuery 对话框答案

【问题标题】：jQuery Dialog showing input item显示输入项的 jQuery 对话框
【发布时间】：2016-04-14 08:58:30
【问题描述】：

我有两个盒子，“box1”包含列出的项目（文本），“box2”是空的。目的是用户可以将box1中的项目拖到box2，然后按一个按钮注册打开一个对话框。我得到了那个工作！但问题是我需要对话框来显示已拖入box2的项目。

 $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      draggable: false,
    });


    $( "#register" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
 $(function() {

    $( "#box1 li" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
    $( "#box2 ol" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
        $( this ).find( ".respondlist" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
      }
    }).sortable({
      items: "li:not(.respondlist)",
      sort: function() {
        $( this ).removeClass( "ui-state-default" );
      }
    });
  });

我目前不知道该怎么做。如果有人可以帮助我，将不胜感激。

编辑：https://jsfiddle.net/Kasper_J/Lwqbbapu/

【问题讨论】：

标签： jquery jquery-ui dialog jquery-ui-dialog

【解决方案1】：

当您点击注册时。您可以在#box2 ol 中找到所有<li> 元素并将其附加到#dialog。在$( "#dialog" ).dialog( "open" ); 之后执行它，因为当对话框关闭时，它的css 有display:none，因此您可能无法在其上添加任何元素（可能）。

您可以执行以下操作。（测试）

$( "#register" ).click(function() {
  $( "#dialog" ).dialog("open");
  var newcontent = document.createElement('div');
  newcontent.innerHTML = $("#box2 ol").html();
  document.getElementById("dialog").appendChild(newcontent);
});

更新：我更新了解决方案（工作）。（感谢您的提琴）。

这是工作小提琴：Working Fiddle

【讨论】：

感谢您的回复！但这似乎不起作用，对话框仍然是空的。
你可以试试更新的。你也可以解决你的问题，包括你的html。这样我们就可以更有效地提供帮助。