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.
- http://www.pbfjacarepagua.com.br/teste/index.php
- http://www.pbfjacarepagua.com.br/teste/admin/painel/index.php
<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>
$(window).load()
distintamente para cada uma das funcionalidades? Tenta inserir o drag e o resize no mesmo e me diz o que acontece.