当前位置：文江博客话题详情

jquery 中可调整大小、可拖动的对象。可能的？

发布于 2024-10-15 20:48:37 字数 473 浏览 7 评论 0原文

我想要一个既可以调整大小又可以拖动的对象。我需要：

X
Y
大小

对象的

。这可能吗？

http://www.jsfiddle.net/davidThomas/DGbT3/1/ 上有一个示例获取可拖动对象的 x 和 y。我怎样才能让它调整大小？

谢谢

值得补充的是，这个问题与上一个问题相关并建立在上一个问题的基础上：如何获取可拖动对象的位置？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

流云如水 2024-10-22 20:48:37

当然是... jQuery UI 适合拖放、调整大小、选择和排序等复杂行为。

使用 jQuery UI，您可以：

拖放
调整
大小
排序

您可以将所有内容链接在一起。

对于调整大小功能来说，包含 jquery-ui.css 文件非常重要。

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

这是存档的完整代码：

<!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>

请参阅评论：
在此处输入图像描述

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 原文