Resizable, draggable object in jquery. Possible?

Question

Resizable, draggable object in jquery. Possible?

14.3k Views Asked by Pabuc At 20 October 2024 at 08:03

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?

Original Q&A

There are 2 best solutions below

Gray Bananas On 04 February 2011 at 23:26

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:

$('#dropHere').resizable();

And I added css-style in managed resources "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css"

And it worked!

**gearsdigital** · Accepted Answer

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

Resizable, draggable object in jquery. Possible?

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in JQUERY-UI

Related Questions in DRAGGABLE

Related Questions in RESIZABLE

Trending Questions

Popular # Hahtags

Popular Questions