Диалоговите прозорци на потребителския интерфейс на jQuery не могат да се плъзгат и преоразмеряват след appendTo?

Внедрявам лепкави бележки с помощта на диалогови прозорци на jquery ui. При щракване върху бутон се отваря голям диалогов прозорец на потребителския интерфейс на цял екран и вътре в този голям диалогов прозорец има бутон за добавяне на малки диалогови прозорци (бележки).

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

Ето начина, по който можете да преодолеете проблема, Демо Просто задайте dragable и resizable на false и им се обадете отделно, след като създадете диалоговия прозорец. и не забравяйте да клонирате динамичния елемент и да използвате динамичен id за този елемент

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