Resizable, draggable object in jquery. Possible?

jquery jquery-ui draggable resizable

13,916

Sure it is... jQuery UI is good for complex behaviors like drag and drop, resizing, selection and sorting.

With jQuery UI you can:

Drag
Drop
Resize
Sort

And you can everything chain together.

It is important for the resize feature that you include the jquery-ui.css file.

JSFIDDLE: http://jsfiddle.net/uQWRk/

Here is the full code for archive:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {

        $('#dragThis').resizable({
            stop: function(event, ui) {
                var w = $(this).width();
                var h = $(this).height();
                console.log('StopEvent fired')
                console.log('Width:'+w);
                console.log('Height:'+h)    
            }
        }).draggable(
            {
                containment: $('body'),
                drag: function(){
                    var offset = $(this).offset();
                    var xPos = offset.left;
                    var yPos = offset.top;
                    $('#posX').text('x: ' + xPos);
                    $('#posY').text('y: ' + yPos);
                },
                stop: function(){
                    var finalOffset = $(this).offset();
                    var finalxPos = finalOffset.left;
                    var finalyPos = finalOffset.top;

            $('#finalX').text('Final X: ' + finalxPos);
            $('#finalY').text('Final X: ' + finalyPos);
                }
            });

        $('#dropHere').droppable(
            {
                accept: '#dragThis',
                over : function(){
                    $(this).animate({'border-width' : '5px',
                                     'border-color' : '#0f0'
                                    }, 500);
                    $('#dragThis').draggable('option','containment',$(this));
                }
            });
    });

</script>   
<style type="text/css">
    #dragThis {
        width: 6em;
        height: 6em;
        padding: 0.5em;
        border: 3px solid #ccc;
        border-radius: 0 1em 1em 1em;
        background-color: #fff;
        background-color: rgba(255,255,255,0.5);
    }

    #dropHere {
        width: 12em;
        height: 12em;
        padding: 0.5em;
        border: 3px solid #f90;
        border-radius: 1em;
        margin: 0 auto;
    }
</style>
</head>
<body>
<div id="dragThis">
<ul>
    <li id="posX"></li>
    <li id="posY"></li>
    <li id="finalX"></li>
    <li id="finalY"></li>
</ul>
</div>
<div id="dropHere"></div>
</body>
</html>

See comments: enter image description here

13,916

Author by

Pabuc

It is all about test

Updated on June 04, 2022

Comments

Pabuc almost 2 years
I want to have an object which is both resizable and draggable. I'll need:
- X
- Y
- Size
of the object.

Is this possible?

There is an example on http://www.jsfiddle.net/davidThomas/DGbT3/1/ which gets the x and y of the draggable object. How can I also make it resizable?

Thanks

It's worth adding that this question is related to, and built on, this previous question: How to get the position of a draggable object?
Pabuc about 13 years

Doesn't work when I add .resizable() to the example jsfiddle.net/davidThomas/DGbT3/1
Pabuc about 13 years

Can you tell me how the make the draggable object on jsfiddle.net/davidThomas/DGbT3/1 also resizable and get the size of it?
gearsdigital about 13 years

Yes i can. Give me a second to figure it out.
Larry Cinnabar about 13 years

resizable doesn't work without class="ui-widget-header" and attached css style (of any jquery theme).
Larry Cinnabar about 13 years

I haven't tried with your link, but in my local example, if I delete <link type="text/css" href="css/flick/jquery-ui-1.8.9.custom.css" rel="stylesheet"> line, than resizable doesn't work.
Pabuc about 13 years

I've added class="ui-widget-header" yet it still doesn't work. What else do I have to do? Can you please reference to the link I've gave.
Larry Cinnabar about 13 years

I'll look. But have you jquery-ui (not just jquery) css file attached?
Sikshya Maharjan about 13 years

That's pretty cool. Um, I've not looked closely at why, but on the draggable's resize event the droppable jumps a little. Using appendTo() or something similar?
gearsdigital about 13 years

Can't understand what are you mean. Everything works as i expected. No jumps here... Maybe it is a browser or css issue in your case.
Pabuc about 13 years

That is great. Can you point me how to get/set the size of the object.
gearsdigital about 13 years

I figured it out. It jumps because on page load the dragThis Div has position:static. But if you resize it it becomes position:absolute and lost his document flow. Add position: absolute; would prevent Jumping.
Sikshya Maharjan about 13 years

Well, in Chrome 8 on Ubuntu 10.10, resizing the draggable div causes the droppable div to jump. I' assuming it's because the draggable's being position: absolute;-d, maybe?
gearsdigital about 13 years

@David Thomas Exactly! @Papuc Just ask the dragThis div: var height = $(this).height(); var width = $(this).width();
Sikshya Maharjan about 13 years

@gearsdigital, that's kind of implemented in the most-recent edit on my answer to the other question. JS Fiddle link. I just couldn't, for the life of me, think how to incorporate resizable as well. To my eternal shame... XD
Pabuc about 13 years

@gearsdigital - Resize:Stop function isn't triggered. I need to move the object to get the width-height. I guess stop is common for both resize and draggable. How can I make it fire for both events?
gearsdigital about 13 years

Sure it is... :) You need to config the resizeable(). See my update: gearsdigital.com/sandbox/ui Note the Firebug Console. You will see once resizing is stopped a message appears width the element Width value and element height value. Take a look at the source.
Pabuc about 13 years

I don't see the width and height on stop. Is it just me? :(
gearsdigital about 13 years

Dont no what you mean. See my update above... Maybe you are not familar with Firebug or i did not understand you correctly.
Pabuc about 13 years

I get it now :) I'll start another question. Hope you can help me with that one too :) thank you for your great help.
gearsdigital about 13 years

See the the code update above. Should work... you need just to work with the data.
Pabuc about 13 years

stackoverflow.com/questions/4904266/…