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

个回答

爱前端的小鑫

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

0

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为零的话那控制元素不应该在父元素的左边吗？

0
炒了个基

2016-12-01 10:10:12

控制元素相对于panel绝对定位，cls[i].style.left = '' 指的就是鼠标松开后控制元素到父元素的left值为0

0