javascript - ダイアログの後にドラッグ可能な要素が消える

Question

ドラッグ可能/並べ替え可能な効果を使用して新しい要素をリストに追加し、その名前を尋ねるダイアログ ウィンドウを開こうとしています。ただし、ダイアログを閉じると、新しく作成された要素が消えます。

$(function() {
  $( "#sortable" ).sortable({
    revert: true
  });
  $( "#draggable" ).draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid",
    stop: function(event, ui) {
      $("#dialog").dialog('open');
    }
  });
  $( "ul, li" ).disableSelection();
});
$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    height: 150,
    width: 200,
    modal: true
  });
});
function changeTitle() {
  var boxText = $("#newsTitle").val();
  $(".ui-draggable").text(boxText);
  $(".ui-state-default").removeClass('ui-draggable');
}

ダイアログが戻ったときに何か関係があることに絞り込んだと思います。何か案は？