为什么将控制元素的Left和top设置为空，bug就没有了呢？
来源：2-9 更改面板大小(Resizeable Panel)
爪哇一只猫
2016-11-29 19:58
为什么将控制元素的Left和top设置为空，bug就没有了呢？
写回答
关注
4回答
-
- 爱前端的小鑫
- 2020-05-06 22:11:10
因爲ui-Resizable-ctrl原來的樣式是left 0和top 0;
移動的過程中改變了ui-Resizable-ctr的left和top值，
设置ui-Resizable-ctr的style为空后
ui-Resizable-ctrl繼續跟隨panel
-
- jarvisss
- 2020-03-30 16:07:28
<!-- 以下代码片段是执行两次相同操作之后的结果。 --> <!-- 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>
-
- 爪哇一只猫
- 2016-12-02 22:32:03
控制元素到父元素的Left为零的话 那控制元素不应该在父元素的左边吗？
-
- 炒了个基
- 2016-12-01 10:10:12
控制元素相对于panel绝对定位，cls[i].style.left = '' 指的就是鼠标松开后控制元素到父元素的left值为0
可调大小面板实现（Resizeable Panel）
前端UI组件仓库必备，先从分析实现原理到步骤分解，走完全过程
13047 学习 · 48 问题
相似问题