                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /可調(diào)大小面板實(shí)現(xiàn)（Resizeable Panel）

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

爪哇一只貓

2016-11-29

源自：可調(diào)大小面板實(shí)現(xiàn)（Resizeable Panel） 2-9

關(guān)注問題我要回答

1663

操作

收起

4 回答

愛前端的小鑫
2020-05-06

因爲(wèi)ui-Resizable-ctrl原來的樣式是left 0和top 0;

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

設(shè)置ui-Resizable-ctr的style為空后

ui-Resizable-ctrl繼續(xù)跟隨panel

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

jarvisss
2020-03-30

<!--
以下代碼片段是執(zhí)行兩次相同操作之后的結(jié)果。
-->

<!--?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>
<!--?鼠標(biāo)彈起會清空元素的top和left，所以位置是開始在CSS中設(shè)置的值?-->
<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 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

爪哇一只貓提問者
2016-12-02

控制元素到父元素的Left為零的話那控制元素不應(yīng)該在父元素的左邊嗎？

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

白大官人

控制元素到父元素的Left為零的話那控制元素不應(yīng)該在父元素的左邊嗎？

2018-07-09 回復(fù) 有任何疑惑可以回復(fù)我~

#2

張小顛001 回復(fù) 白大官人

雖然不知道你還需要不需要，我還是說一下我的理解把。因?yàn)樽筮吥菞l在CSS里面已經(jīng)設(shè)置了right:0；后來經(jīng)過JS代碼動態(tài)的拖動之后，相當(dāng)于給他又加了一個left值，把right:0覆蓋掉了。這個時候松開鼠標(biāo)時，清空left值，right:0就又起作用了，所以他還是緊緊靠在右邊。下面那條同理，bottom:0被覆蓋，清空top之后botton又生效。這是我的理解，不一定時正確的，獻(xiàn)丑

2018-10-29 回復(fù) 有任何疑惑可以回復(fù)我~

#3

張小顛001 回復(fù) 張小顛001

因?yàn)橛疫吥菞l，不好意思筆誤

2018-10-29 回復(fù) 有任何疑惑可以回復(fù)我~