                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /可調大小面板實現（Resizeable Panel）

為什么將控制元素的Left和top設置為空，bug就沒有了呢？

爪哇一只貓

2016-11-29

源自：可調大小面板實現（Resizeable Panel） 2-9

關注問題我要回答

1674

操作

收起

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 回復有任何疑惑可以回復我~