Resizable, draggable object in jquery. Possible?

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?

回答1:

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:

回答2:

If you mean draggable, that something like this:

$( "#elem" ).resizable().draggable();

Size and position you can point with css (first time). Than you can change them and get (when you resize or move) with jQuery.

You can add options to draggable() and resizable() methods. Reference is here: http://jqueryui.com/demos/resizable/ and http://jqueryui.com/demos/draggable/

P.S. This code requires jquery-ui.js file and jquery-ui.css (because it draws a marker to resize)

P.P.S.

With your link: In JavaScript frame I added the line: