css絕對定位設置left值div位置沒有變化

設置left值，handle位置不會變化

部分樣式：

        .view .code,
        .view .example {
            position: absolute;
            top: 0px;
            left: 0px;
            background-image: url("assets/img/1.jpg");
            background-color: #f3f3f3;
            background-repeat: no-repeat;
            background-size: 500px;
            width: 100%;
            height: 100%;
        }

代碼：

<body>
<div class="container">
            <div class="view">
                <div class="code">world</div>
                <div class="example">hello2</div>
                <div class="handle" >
                    <div class="tracker"></div>
                </div>
            </div>
        </div>
<script>
            var app = {
                html: {
                    handle: document.querySelectorAll('.handle')[0],
                    tracker: document.querySelectorAll('.handle .tracker')[0],
                    code: document.querySelectorAll('.code')[0],
                    view: document.querySelectorAll('.view')[0],
                    example: document.querySelectorAll('.example')[0],
                    container: document.querySelectorAll('.container')[0]
                },
                dragging: false,
                init: function() {
                    this.addEvents()
                    this.move(250)
                },
                addEvents: function() {
                    var that = this
                    this.html.handle.addEventListener('mousedown', function() {
                        that.html.tracker.style.display = 'block'
                        that.dragging = true
                    })
                    this.html.tracker.addEventListener('mouseup', function() {
                        that.html.tracker.style.display = 'none'
                        that.dragging = false
                    })
                    this.html.tracker.addEventListener('mousemove', function(event) {
                        var cBox = that.html.container.getBoundingClientRect();
                        var hBox = that.html.handle.getBoundingClientRect();
                        var newX = event.clientX - cBox.left

                        if(newX > cBox.width - hBox.width)
                            newX = cBox.width - hBox.width

                        if(newX < 0)
                            newX = 0
                        that.move(newX)
                    })
                },
                move: function(x) {
                    this.html.handle.style.left = x + 'px'
                    this.html.example.style.width = (x) + 'px'
                }
            }

            app.init();
        </script>
</body>

回答

編輯回答