1

Criei um código e estou tendo problemas com ele.

Já testei individualmente ambos, tanto Draggable como o Resizablee, e funcionaram perfeitamente, alterando os dados no input, e quando atualizado gravando no Banco de Dados.

Mas juntos não estão funcionando, somente consigo alterar o tamanho da imagem, e mesmo assim eu gostaria que ele me mostrasse as escalas nos input, conforme a movimentação do mouse, e isso não esta acontecendo, pois do tamanho que esteja ele sempre começa da escala 0.

Se os amigos puderem me dar essa ajuda, ficarei muito grato.

PS.: Abaixo endereços para teste da pagina e do painel ADM.

<script type="text/javascript">
    $(window).load(function() {
        $('#img').draggable({
            drag: function() {
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $('#posXimg').val('' + xPos);
                $('#posYimg').val('' + yPos);
            }
        });
    });

    $(window).load(function() {
        var startW = 0;
        var startH = 0;
        $('#img').resizable({
            start: function(event, ui) {
                startW = $(this).outerWidth();
                startH = $(this).outerHeight();
            },

            stop: function(event, ui) {
                endW = $(this).outerWidth();
                endH = $(this).outerHeight();

                $('#posWimg').val('' + endW - startW);
                $('#posHimg').val('' + endH - startH);
            }
        });
    });
</script>

<body>
    <form name="enter" method="post" action="" enctype="multipart/form-data">
        <label>Largura: </label>
        <input type="text" id="posWimg" name="larg_img" value="<? echo $res['larg_img'];?>" />
        <label>Altura: </label>
        <input type="text" id="posHimg" name="altu_img" value="<? echo $res['altu_img'];?>" />
        <label>Posicionamento: </label>
        <input type="text" id="posXimg" name="hori_img" value="<? echo $res['hori_img'];?>" />
        <input type="text" id="posYimg" name="vert_img" value="<? echo $res['vert_img'];?>" />
        <input class="input" type="submit" name="enter" value="Atualizar" />
    </form>
    <br />

    <img width="<? echo $res['larg_img'];?>" height="auto" title="CPanel" align="left" src="../../upload/<? echo $res['img'];?>" id="img" class="ui-draggable ui-draggable-handle" style="cursor: move; position: absolute; left: <? echo $res['hori_img'];?>px; top: <? echo $res['vert_img'];?>px;" />

</body>
</html>
2
  • Poque você está utilizando o $(window).load() distintamente para cada uma das funcionalidades? Tenta inserir o drag e o resize no mesmo e me diz o que acontece. 30/04/2015 às 1:17
  • 1
    Não sei se era isso que vc. se referia Erlon, mas eu retirei o $(window).load() que esta antes do $('#img').resizable, e continua dando chabu...rsrsrsr Agora ele ignora a função do resizable, só esta funcionando a função draggable. Me desculpe mas eu ainda sou muito inexperiente em script! Teria como vc. me demostrar como fazer? Fica aqui o meu agradecimento pela sua atenção. 30/04/2015 às 3:28

1 Resposta 1

-1

O jQuery adiciona um novo elemento ao DOM quando instala a funcionalidade drag. Uma div.ui-wrapper à volta da tua img. Pessoalmente acho isso má prática e geradora de bugs até o programador perceber que a sua estrutura do DOM foi alterada.

Para resolveres o problema tens de adicionar também uma div à volta da imagem que é aquela que passas para o .draggable(). Depois aplicas o resizable à imagem dentro desse teu wrapper.

HTML:

<div id="imgWrapper">
    <img width="200" height="150" title="CPanel" align="left" src="../../upload/<? echo $res['img'];?>" id="img" class="ui-draggable ui-draggable-handle" />
</div>

JavaScript:

$('#imgWrapper').draggable({
    drag: function (e) {
        var offset = $(this).find('img').offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posXimg').val(xPos);
        $('#posYimg').val(yPos);
    }
});
var startW = 0;
var startH = 0;
$('#img').resizable({
    //Other options
    start: function (event, ui) {
        startW = $(this).outerWidth();
        startH = $(this).outerHeight();
    },
    stop: function (event, ui) {
        var endW = $(this).outerWidth();
        var endH = $(this).outerHeight();

        $('#posWimg').val(endW - startW);
        $('#posHimg').val(endH - startH);

    }
});

jsFiddle: http://jsfiddle.net/2tmz8pxd/

2
  • Sergio, mais uma vez muito obrigado pela sua ajuda, a orientação para o uso da callback resize foi perfeita, funcionou do jeito que eu queria. Abraços, e ate muito em breve pois dúvidas é que não irá faltar. Rsrsrsrsrs.... 30/04/2015 às 12:12
  • Alguém passou por aqui e deixou um -1. Comentário é bemvindo.
    – Sergio
    4/05/2015 às 21:36

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .