диалоговые окна jQuery ui не перетаскиваются и не изменяются после appendTo?

Question

диалоговые окна jQuery ui не перетаскиваются и не изменяются после appendTo?

Я реализую sticky notes с помощью диалоговых окон пользовательского интерфейса jquery. При нажатии кнопки открывается большое полноэкранное диалоговое окно пользовательского интерфейса, а внутри этого большого диалогового окна находится кнопка для добавления небольших диалоговых окон (заметок).

HTML :

<body>



  <button id="opener">open the dialog</button>



  <div id="outter-dialog" title="Notes">

    <button id = "add-note">Add Note</button>

  </div>

JS:

$( "#outter-dialog" ).dialog({

        autoOpen: false,

        title: "Success Message",

        width: $(window).width(),

        height: $(window).height(),

        modal: false,

    buttons: {

        Cancel: function() {

            $(this).dialog('close');

        }

    }

});



$("#opener").click(function(){

    $( "#outter-dialog" ).dialog('open');

});





var prevelement;

$("#add-note").click(function () {

    var dynamicDialog = $('<div id="MyDialog"> <textarea>Hello</textarea> </div>');

    var pos;

    if (prevelement) {

        pos = {

            my: "left",

            at: "bottom",

            of: prevelement

        }

    }



    dynamicDialog.dialog({

        title: "Note",

        modal: false,

    appendTo: "#outter-dialog",

        buttons: [{

            text: "Save",

            click: function () {}

        }],

        position: pos

    });

    prevelement = dynamicDialog

});

Теперь у меня есть проблема, когда я добавляю appendTo: "#outter-dialog" в мои динамические небольшие диалоговые окна (заметки):

После добавления их в диалоговое окно outter они больше не изменяются и не перетаскиваются.

Я добавил их к outter dilaog box так, что при открытии/закрытии диалогового окна outter внутренние заметки отображаются/скрыты.

Есть идеи, почему они не перетаскиваются и не изменяются??

603 2

jQuery javascript jquery-ui jquery-ui-dialog

2 ответов:

Comments

Ничего не найдено.

Chamika Sandamal · Accepted Answer · 2014-09-17 12:32:57

Вот как вы можете преодолеть эту проблему, демо Просто установите dragable и resizable в false и вызовите их отдельно, как только вы создадите диалоговое окно. и не забудьте клонировать динамический элемент и использовать динамический идентификатор для этого элемента
var elementCount = 0;
$("#add-note").click(function () {
    var dynamicDialog = $('<div> <textarea>Hello</textarea> </div>');
    var pos = {
        my: "left",
        at: "bottom",
        of: "#dialog" + elementCount
    }

    var dialogId = "dialog" + elementCount;
    dynamicDialog.clone(true).attr("id", dialogId).dialog({
        title: "Note",
        modal: false,
        appendTo: "#outter-dialog",
        draggable: false,
        resizable: false,
        buttons: [{
            text: "Save",
            click: function () {}
        }],
        position: pos
    });
    $("#" + dialogId).parent().draggable().resizable();
    elementCount++;
});

sonali pawar · Accepted Answer · 2014-09-16 14:05:36

$( "#outter-dialog" ).dialog({
autoOpen: false,
title: "Success Message",
width: $(window).width(),
height: $(window).height(),
modal: false,
resizable: true,
draggable: true,
buttons: {
        Cancel: function() {
         $(this).dialog('close');
        }
    }
});