显示输入项的 jQuery 对话框

Posted 2023-05-08

【中文标题】显示输入项的 jQuery 对话框

【英文标题】：jQuery Dialog showing input item

【发布时间】：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/

【参考方案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。这样我们就可以更有效地提供帮助。