I've created a code and I'm having problems with it.
I've individually tested both, both Draggable
and Resizablee
, and worked perfectly by changing the data in the input , and when updated by writing to the Database.
But together they are not working, I can only change the size of the image, and even so I would like it to show me the scales in the input , as the mouse moves, and this is not happening, because of its size it always starts from the 0 scale.
If friends can give me this help, I'll be very grateful.
PS: Below addresses for test page and ADM panel.
<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>