0

Estou usando draggable e resizable do jQuery UI para fazer box que o usuário pode alterar a dimensão e mover. Ele está funcionando corretamente caso eu coloque a <div> direto no código:

<form action="" method="post" class="form row" enctype="multipart/form-data">
  <div class="form-group col-12">
    <img src="URL da imagem" />

    <div id="boxEu" style="width:150px;height:150px;">
        <span class="close-box" ref="1" id="box1">X</span>
        <div class="clearfix"></div>
        <p>Box 1</p>
    </div>

  </div>
</form>

Mas o que estou tentando fazer é que o usuário clique em um botão e adicione quantos Box quiser, sendo assim fiz o código:

HTML:

<form action="" method="post" class="form row" enctype="multipart/form-data">
  <div class="form-group col-12">
    <img src="URL da Foto" />

    <div class="blocos"></div>

  </div>
</form>

jQuery

var zIndexUser = 1;

$("button#addUser").click(function(){

    var html  = '<div id="boxEu" style="z-index:'+zIndexUser+';width:150px;height:150px;top:'+(zIndexUser * 10)+'px;left:'+(zIndexUser * 10)+'px;">';
        html += '<span class="close-box">X</span>';
        html += '<div class="clearfix"></div>';
        html += '<p><b>Foto '+zIndexUser+'</b> do Testador</p>';
        html += '</div>';

    $(".blocos").append(html);

    zIndexUser++;
});

Ele adiciona corretamente, mas a função de mover e redimensionar o elemento não funcionam, pois esses itens foram adicionados depois. O que preciso é fazer a função abaixo funcione também nesses novos itens que o usuário ir adicionando:

Código jQuery UI:

$( function() {
    $( "div#boxEu" ).resizable({
        stop : function(event,ui) {
           $("#inputEuWidth").val(ui.size.width);
           $("#inputEuHeight").val(ui.size.width);
        }
    }).draggable({
        drag : function(event,ui) {

            $("#inputEuLeft").val(ui.position.left);
            $("#inputEuTop").val(ui.position.top);
        },
        containment: '.form-group'
    });
});
2
  • 1
    Tente deixar assim: $("button#addUser").on("click", ".blocos", function(){ @AlissonAcioli
    – BrTkCa
    30/12/2016 às 18:41
  • Não funciona dessa forma @LucasCosta 30/12/2016 às 18:54

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .