jQuery Диалог, показывающий элемент ввода

Question

У меня есть две коробки, «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"); 
     } 
    }); 
    }); 

В настоящее время я не знаю, как это сделать. Было бы благодарно, если бы кто-нибудь мог мне помочь.

Edit: 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

---