jQuery 显示输入项的对话框

Question

我有两个框，"box1" 包含列出的项目（文本），"box2" 是空的。 objective是用户可以将box1中的item拖到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/

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

更新： 我更新了解决方案（有效）。（感谢 fiddle）。

这是工作 fiddle ：Working Fiddle

jQuery 显示输入项的对话框

jQuery Dialog showing input item

jquery

jquery-ui

dialog

jquery-ui-dialog