Problem working with Draggable and Resizable in the same image

Asked

Viewed 97 times

1

I created a code and I’m having problems with it.

I’ve tried them both individually, both Draggable like the Resizablee, and worked perfectly, altering the data in the input, and when updated recording in the Database.

But together they’re not working, I can only change the size of the image, and yet I’d like him to show me the scales in input, as the mouse moves, and this is not happening, because of the size that is it always starts from the scale 0.

If friends can give me that help, I’d 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>
php javascript jquery html

  • Why are you using the $(window).load() distinctly for each of the features? Try to insert the drag and resize it and tell me what happens.

  • 1

    I don’t know if that’s what you. referred to as Erlon, but I removed the $(window). load() that was before the $('#img'). resizable, and keeps giving Chabu...rsrsrsr Now it ignores the resizable function, only draggable function is working. I’m sorry but I’m still very inexperienced in script! Would you like me to demonstrate how? Here is my thanks for your attention.

1 answer

-1


jQuery adds a new element to the DOM when installing the functionality drag. One div.ui-wrapper around your img. Personally I find it bad practice and bug-generating until the programmer realizes that his DOM structure has been changed.

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

  • Sergio, thank you again for your help, the guidance for using callback resize was perfect, it worked the way I wanted it. Hugs, and even very soon because doubts will not be lacking. Rsrsrsrsrs....

  • Someone came by and left a -1. Comment is welcome.

Browser other questions tagged php javascript jquery html

You are not signed in. Login or sign up in order to post.