Диалоговые окна пользовательского интерфейса jQuery нельзя перетаскивать и изменять размер после appendTo?

Я реализую липкие заметки, используя диалоговые окна пользовательского интерфейса 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" в свои небольшие динамические диалоговые окна (примечания):

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

Я добавил их во внешнее диалоговое окно, чтобы при открытии/закрытии внешнего диалогового окна внутренние заметки отображались/скрывались.

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


javascript jquery jquery-ui jquery-ui-dialog appendto
person Siddharth Trikha    schedule 15.09.2014    source источник
comment
вам нужно делегировать событие для динамически сгенерированного html, см. здесь stackoverflow.com/questions/22960144/   -  person Kartikeya Khosla    schedule 15.09.2014
comment
@Kartikeya: я пробовал $( "#outter-dialog" ).on( "mouseover", ".MyDialog", function( event ) { var elem = $( this ); alert(elem.text()); elem.dialog("option", "resizable", true); }); . Но все же это не изменяемый размер. Любая идея??   -  person Siddharth Trikha    schedule 15.09.2014

Ответы (1)


arrow_upward
8
arrow_downward

Вот как вы можете решить эту проблему: Demo Просто установите 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++;
});
person Chamika Sandamal    schedule 16.09.2014
comment
appendTo не работает так как было добавлено в версии 1.10 - person Siddharth Trikha; 16.09.2014
comment
appendTo диалогового окна, я имел в виду. - person Siddharth Trikha; 16.09.2014
comment
Извините за путаницу. Обновлен рабочий ответ для вас :) - person Chamika Sandamal; 17.09.2014
comment
Ответ выше работает, но теперь новые заметки располагаются не рядом, а bottom. После попытки top слишком новые заметки не перемещаются рядом. Любая идея? - person Siddharth Trikha; 17.09.2014
comment
Они расположены один под другим. Я имел в виду одно помимо другого - person Siddharth Trikha; 17.09.2014
comment
Есть ли способ разместить новую заметку в следующей строке, когда новая созданная заметка достигает ширины экрана?? Таким образом, после создания 3-х нот появляется прокрутка, когда 4-я нота располагается справа от 3-й. - person Siddharth Trikha; 01.10.2014