Problem in working with Draggable and Resizable in the same image

Navigation
1

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>
    
asked by anonymous 30.04.2015 / 00:38

1 answer

-1

jQuery adds a new element to the DOM when it installs the drag functionality. A div.ui-wrapper around your img . Personally I find this bad practice and bug-bending until the programmer realizes that their DOM structure has changed.

To solve the problem, you must also add a div around the image that is the one you pass to .draggable() . Then you apply resizable to the image inside that your 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: link

    
30.04.2015 / 06:24
How do I adjust my application to the screen size of multiple devices? [duplicate] Object can not be cast from DBNull to other types