Resizable, draggable object in jquery. Possible?

2019-02-18 19:26发布

站内问答 / jQuery
1953 2 4

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?

2条回答
小情绪 Triste *
2楼-- · 2019-02-18 19:37

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!

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
3楼-- · 2019-02-18 19:52

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)