代码之家 › 专栏 › 技术社区 › Arnaud F.

可拖动和可扩展的容器

draggable jquery-ui

Arnaud F. · 技术社区 · 14 年前

我试图授权只在容器的右侧或底部拖出一个对象,如果不停止拖出元素,则无法正确地执行此操作。

我的代码:

<!DOCTYPE html>
<html>
<head>
  <style>
  #parent { height: 500px; width: 500px; border: 1px black solid; }
  #images { height: 100px; width: 100px; background-color:orange; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
</head>
<body>
<div id="parent">
    <div id="images"></div>
</div>
<script>
$(document).ready(function() {
    $("#images").draggable({
        containment: $("#parent"),
        drag: function(event, ui) {
            var helper = ui.helper, pos = ui.position;
            if(pos.left + parseInt(helper.outerWidth(), 10) == parseInt($("#parent").css("width"), 10)) {
                $("#parent").animate({width: "+=100"});
            }
            if(pos.top + parseInt(helper.outerHeight(), 10) == parseInt($("#parent").css("height"), 10)) {
                $("#parent").animate({height: "+=100"});
            }
        }
    });
});
</script>
</body>
</html>

你知道刷新容器大小以便继续在右侧或底部拖动吗?

谢谢!

1 回复 | 直到 14 年前

Thomas 14 年前

简单解决方案(参见 DEMO ):

<!DOCTYPE html>
<html>
<head>
  <style>
  #parent { height: 300px; width: 300px; border: 1px black solid; position: relative; left: 0; }
  #images { height: 100px; width: 100px; background-color:orange; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
</head>
<body>
<div id="parent">
    <div class="container">
        <div id="images"></div>
    </div>
</div>
<script>
$(document).ready(function() {
    var
        $document = $(document),
        $parent = $("#parent"),
        $container = $(".container", $parent),
        offset = $container.offset(),
        scrollbarSafety = 15; // use this to avoid dragging outside of window, thus creating scrollbars and wreaking all kinds of havoc on draggables containment checks

    $container
        .width($document.width() - offset.left - scrollbarSafety)
        .height($document.height() - offset.top - scrollbarSafety);

    $("#images")
            .draggable(
            {
                containment: $container,
                drag:
                    function(event, ui)
                    {
                        var
                            $draggee = $(this),
                            draggeePosition = $draggee.position(),
                            shouldWidth = draggeePosition.left + $draggee.width(),
                            shouldHeight = draggeePosition.top + $draggee.height();
                        if($parent.width() < shouldWidth)
                        {
                            $parent.width(shouldWidth);
                        }
                        if($parent.height() < shouldHeight)
                        {
                            $parent.height(shouldHeight);
                        }
            }
            }
        );
});
</script>
</body>
</html>

推荐文章

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

6 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

6 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

6 年前

Paili · 如何在jQuery自动完成中添加其他内容?

6 年前

monu · 动态嵌套选项卡创建

6 年前

Tirkesh Turkesh · 可拖动行在jquery中不工作?

6 年前

Joe · WordPress-如何按字母顺序排列jQuery自动完成搜索建议结果,优先排序第一个字符,然后再排序第二个字符等。?

6 年前

Triwahyu Pamungkas Pribadi · 如何在可拖动停止时获取目标/类名

6 年前

pcCC28 · 如何基于jwt令牌身份验证保持用户登录。

6 年前

buggy1985 · 具有多个元素的jQuery UI Sortable抛出“TypeError:无法读取null的属性‘insertBefore’”

6 年前