                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /可调大小面板实现（Resizeable Panel）

为什么将控制元素的Left和top设置为空，bug就没有了呢？

爪哇一只猫

2016-11-29

源自：可调大小面板实现（Resizeable Panel） 2-9

关注问题我要回答

1531

操作

收起

4 回答

爱前端的小鑫
2020-05-06

因爲ui-Resizable-ctrl原來的樣式是left 0和top 0;

移動的過程中改變了ui-Resizable-ctr的left和top值，

设置ui-Resizable-ctr的style为空后

ui-Resizable-ctrl繼續跟隨panel

0 回复有任何疑惑可以回复我~

收起回答

jarvisss
2020-03-30

<!--
以下代码片段是执行两次相同操作之后的结果。
-->

<!-- 1. 未清空top和left之后，panel元素的代码片段 -->
<!-- 向右移动到panel.width=600px的位置 -->
<div class="panel" id="ui-Resizable" style="width: 600px;">    
    <div class="title">Resizable Panel</div>    
    <div class="ui-Resizable-r  ui-Resizable-ctrl" style="left: 590px;"></div>    
    <div class="ui-Resizable-b  ui-Resizable-ctrl"></div>    
    <div class="ui-Resizable-rb ui-Resizable-ctrl"></div>
</div>
<!-- 向右下移动到panel.width=700px,height=600px的位置。注意看右控制元素的left值为590，所以会造成错位 -->
<div class="panel" id="ui-Resizable" style="width: 700px; height: 600px;">    
    <div class="title">Resizable Panel</div>    
    <div class="ui-Resizable-r  ui-Resizable-ctrl" style="left: 590px;"></div>    
    <div class="ui-Resizable-b  ui-Resizable-ctrl"></div>    
    <div class="ui-Resizable-rb ui-Resizable-ctrl" style="left: 680px; top: 580px;"></div>
</div>

<!-- 2. 清空完top和left之后，panel元素的代码片段 -->
<div class="panel" id="ui-Resizable" style="width: 600px;">    
    <div class="title">Resizable Panel</div>    
    <div class="ui-Resizable-r  ui-Resizable-ctrl" style=""></div>    
    <div class="ui-Resizable-b  ui-Resizable-ctrl"></div>    
    <div class="ui-Resizable-rb ui-Resizable-ctrl"></div>
</div>
<!-- 鼠标弹起会清空元素的top和left，所以位置是开始在CSS中设置的值 -->
<div class="panel" id="ui-Resizable" style="width: 700px; height: 600px;">    
    <div class="title">Resizable Panel</div>    
    <div class="ui-Resizable-r  ui-Resizable-ctrl" style=""></div>    
    <div class="ui-Resizable-b  ui-Resizable-ctrl"></div>    
    <div class="ui-Resizable-rb ui-Resizable-ctrl" style=""></div>
</div>

0 回复有任何疑惑可以回复我~

收起回答

爪哇一只猫提问者
2016-12-02

控制元素到父元素的Left为零的话那控制元素不应该在父元素的左边吗？

0 回复有任何疑惑可以回复我~

收起回答

白大官人

控制元素到父元素的Left为零的话那控制元素不应该在父元素的左边吗？

2018-07-09 回复有任何疑惑可以回复我~

张小颠001 回复白大官人

虽然不知道你还需要不需要，我还是说一下我的理解把。因为左边那条在CSS里面已经设置了right:0；后来经过JS代码动态的拖动之后，相当于给他又加了一个left值，把right:0覆盖掉了。这个时候松开鼠标时，清空left值，right:0就又起作用了，所以他还是紧紧靠在右边。下面那条同理，bottom:0被覆盖，清空top之后botton又生效。这是我的理解，不一定时正确的，献丑

2018-10-29 回复有任何疑惑可以回复我~

张小颠001 回复张小颠001

因为右边那条，不好意思笔误

2018-10-29 回复有任何疑惑可以回复我~