0

这个问题可能听起来很奇怪，对不起，如果它没有多大意义......我在一个容器中有一个可调整大小的元素，它有溢出：滚动。如果我调整元素的大小，鼠标最终会离开容器并且滚动条开始增长。这对我的目的来说并不理想，因为我需要永久查看调整大小的元素的端点。是否可以在调整大小的同时将鼠标保持在容器内，以便我可以一直看到调整大小的元素的结尾？

<script src="Scripts/jquery-1.10.1.min.js"></script>
<script src="Scripts/jquery-ui.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $("#child").resizable({
            resize: function (event, ui) {

            },
            start: function (event, ui) {
                $("#child").css({
                    position: "relative !important",
                    top: "0 !important",
                    left: "0 !important"
                });
            },
            stop: function (event, ui) {
                $("#child").css({
                    position: "",
                    top: "",
                    left: ""
                });

            }
        });
    });

</script>

<style type="text/css">

    #parent { width:250px; height:250px; background-color:yellow; border: 1px solid gray; position:relative; overflow-y:scroll; }
    #child { width:220px; height:220px; background: rgba(200, 54, 54, 0.5); border: 1px solid gray; top:0px;  }

    .ui-resizable { position: relative;}
    .ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
    .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
    .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
    .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
    .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
    .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
    .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
    .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
    .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
    .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
</style>

<form id="form1" runat="server">
<div>      
    <div id="parent">
        <div id="child"></div>
    </div>            
</div>
</form>
4

1 回答 1

1

您不能强制鼠标停留在父级内部，但您可以在调整大小时自动滚动以查看子级的右下角：

resize: function (event, ui) {
    $('#parent').scrollTop($('#child').height());
    $('#parent').scrollLeft($('#child').width());
}

看到这个小提琴

于 2013-07-22T13:10:25.490 回答