AngularJS - onmousedown 和 onmousemove 不同步

Question

我正在尝试使用ng-repeat object 数组构建动态 div 标签。 加载 div 后，我使用 angularjs 指令来实现鼠标移动功能，将 div 水平拖动到容器的左侧或右侧。 ng-repeat div 的z-index 1 -index 从 1 开始并以 1 递增。z-index 为 1 的第一个 div 标签与 mousedown 事件和 mousemove 事件同步移动。 问题出在 div 标签的 rest 上。 每当在z-index 2或更高的 div 上应用 mousedown 时，div 标签就会移动到页面的右侧，而不允许我用鼠标将其移动到右侧或左侧。 它只是向右移动而无需等待鼠标移动下一个 position。

前：

后：

AngularJS 指令代码：

app.directive('draggable', ['$document', function($document) {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            var startX, startY, initialMouseX, initialMouseY;
            elm.css({ position: 'relative', flex: 'grow' });

            elm.bind('mousedown', function($event) {
                startX = elm.prop('offsetLeft');
                initialMouseX = $event.clientX;
                $document.bind('mousemove', mousemove);
                $document.bind('mouseup', mouseup);
                return false;
            });

            function mousemove($event) {
                var dx = $event.clientX - initialMouseX;
                elm.css({
                    left: startX + dx + 'px'
                });
                return false;
            }

            function mouseup() {
                $document.unbind('mousemove', mousemove);
                $document.unbind('mouseup', mouseup);
            }
        }
    };
}]);

HTML 代码：

                                   <div class="scheduler-right">
                                    <div id="scrollMark" class="schedule-pane">
                                      <div class="schedule-pane-mark" ng-style="{'height' : t.height + 'px'}" ng-repeat="t in paneEventArr track by $index">
                                            <div id="banner" ng-show="banner" ng-class="{'schedule-pane-text': t.day != ''}" ng-style="{'z-index': 500}">{{t.day}}</div>
                                            <div ng-dblclick="getActColumn(act.act_id, act.height, eventActs)" ng-if="eventActs.length > 0" style="display: flex;" ng-repeat="act in eventActs track by $index">
                                              <div draggable id="{{'eventAct' + act.act_id}}" ng-if="t.hour_date == act.act_date" class="event-acts" ng-style="{'height': act.height + 'px', 'cursor': 'pointer', 'z-index': act.zindex, 'background': act.res_grp_rgba}">
                                                <div id="{{act.act_id}}" class="col-md-12 act-top" ng-style="{'background': act.res_sub_grp_rgba, 'color' : (act.res_sub_grp_light === false) ? '#FFFFFF' : '#000000'}">
                                                    <div class="col-xs-2 act-custom">{{act.custom_id}}</div>
                                                    <div class="col-xs-10 act-resgrp">
                                                        {{act.res_grp_name}}
                                                    </div>
                                                </div>
                                                <div class="col-md-12 act-line" ng-style="{'background' : (act.res_grp_light === false) ? '#FFFFFF' : '#000000'}"></div>
                                                <div class="col-md-12">
                                                    <div class="row act-desc" ng-style="{'height': ((act.sets * 65) - 30) + 'px', 'color' : (act.res_grp_light === false) ? '#FFFFFF' : '#000000'}">
                                                        <pre class="pre-act-desc" ng-style="{'height': ((act.sets * 65) - 30) + 'px', 'color' : (act.res_grp_light === false) ? '#FFFFFF' : '#000000'}">{{act.desc}}</pre>
                                                    </div>
                                                </div>
                                              </div>
                                            </div>
                                      </div>
                                    </div>
                                   </div>

请帮我解决这个问题。