Question

我有两个盒子，＆＃34; box1＆＃34;包含列出的项目（文本）和＆＃34; box2＆＃34;是空的。目标是用户可以将项目从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/

Answer 1

点击注册时。您可以在<li>中找到所有#box2 ol元素，并将其附加到#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

jQuery对话框显示输入项

1 个答案: