在 Angualrjs 中创建自定义可拖动模态表

问：

通过单击按钮，我正在打开一个自定义模态表。这是自定义模态表的代码。我目前正在做的是这个模态弹出它有 70% 的高度。如果我单击被调用的弹出窗口的 outisde 并关闭弹出窗口。showAllMeasurements()

我想使用图标 rectangleIcon （svg） 添加拖动功能

当它被鼠标光标按住或在移动屏幕中时，它被手指握住并向上或向下移动，我希望相应地移动测量托盘 div 高度意味着它会在我们按住和上下移动图标时改变高度。

如果我拿着图标，我从图标上选择拇指或鼠标点击，它的高度小于 25%，那么调用 如果我拿着图标，我从图标上选择拇指或鼠标点击，它的高度超过 75%，那么使 measurementTray 到 100% 如果我按住图标并选择拇指或鼠标单击，并且其高度在 25% 到 75% 之间，则 measurementTray 为 60%showAllMeasurements()div heightdiv height

我已经从我这边做了一些实现，但它不起作用

    <div class="measurementTray" ng-show="project.showAllMeasurementsBar">
                    <div class="trayContentMeasurementTray">
                        <img alt="" class="rectangleIcon" 
                                    src="assets/Icons/rectangle.svg"
                                      ng-mousedown="project.startDrag($event)" ng- 
                                          touchstart="project.startDrag($event)"
                                          ng-mouseup="project.endDrag()" ng- 
                                          touchend="project.endDrag()"
                                          ng-mouseleave="project.endDrag()" ng- 
                                          touchcancel="project.endDrag()" />

                        <img alt="" class="resetScale crossIconforMeasurement"
                            src="assets/closeMeasurementBarCross.svg" ng- 
                 click="project.showAllMeasurements()" />
                        <div class="measurementOptionHeading">View All 
                       Measurementss</div>
                        <div class="measurementTrayOption"
                            ng-repeat="dimension in project.linesInfo | orderBy:'-lineId'"
                            ng-class="{ 'firstOption': $first }">
                            <div>
                                <div class="labelName">{{dimension.dimensionLabel == "" ? 'Untitled' :
                                    dimension.dimensionLabel}}</div>
                                <div class="labelMeasurementInches">{{dimension.measurement}}</div>
                            </div>
                            <div class="labelMeasurementCm">{{
                                project.convertUnitToCentimeters(dimension.measurement) }} cm</div>
                        </div>
                    </div>
                </div>

CSS的

.measurementTray {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    transform-origin: bottom;
    height: 70%;
    background: #FFFFFF;
    border: 1px solid rgba(34, 34, 34, 0.2);
    border-radius: 10px 10px 0px 0px;
    z-index: 101;
    overflow-y: auto;
}

.measurementTray.active {
    transition: transform .3s ease;
}

.measurementTray:not(.active) {
    transform: translateY(100%) !important;
    transition: transform .3s ease;
}

.trayContentMeasurementTray {
    padding: 5px 0 43px 0;
}



.crossIconforMeasurement {
    float: right;
    height: 27px;
    width: 27px;
    position: relative;
    top: 11px;
    margin-right: 24px;
}


.measurementTrayOption {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-bottom: 1px solid #BBC1C3;
    padding: 17px 0px 14px 0px;
}

.measurementTrayOption .labelName {
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 17px;
    color: rgba(109, 121, 131, 0.8);
}

.measurementTrayOption .labelMeasurementInches {
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 37px;
    color: #333333;
}

.measurementTrayOption .labelMeasurementCm {
    align-self: flex-end;
    margin-bottom: 4px;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
    color: #6D7983;
}

.measurementTrayOption.firstOption {
    border-top: 1px solid #BBC1C3;
    margin-top: 17px;
}

JS系列

function showAllMeasurements() {
    if(vm.showTray) {
        vm.showTray = false;
        angular.element('.tray').toggleClass('active', vm.showTray);
    }
    vm.showAllMeasurementsBar = !vm.showAllMeasurementsBar;
    angular.element('.measurementTray').toggleClass('active', 
         vm.showAllMeasurementsBar);
}

// Inside your controller or component
vm.minHeightPercentage = 25; // Minimum height percentage
vm.maxHeightPercentage = 75; // Maximum height percentage
vm.dragging = false; // Flag to track dragging state
vm.startY = 0; // Initial Y position when dragging starts
vm.startHeight = 0; // Initial height of the measurementTray div

// Function to handle the mouse or finger hold event
vm.startDrag = function (event) {
    if (event.target.classList.contains('rectangleIcon')) {
        vm.dragging = true;
        vm.startY = event.clientY || event.touches[0].clientY; // Get initial Y position
        vm.startHeight = angular.element('.measurementTray').height(); // Get initial height of the measurementTray div
        console.log('Start Drag - startY:', vm.startY, 'startHeight:', vm.startHeight);
    }
};

// Function to handle dragging while moving the mouse or finger
vm.handleDrag = function (event) {
    if (vm.dragging) {
        var currentY = event.clientY || event.touches[0].clientY; // Get current Y position
        var deltaY = currentY - vm.startY; // Calculate the change in Y position
        var windowHeight = window.innerHeight; // Get the window height
        var tray = angular.element('.measurementTray'); // Select the measurementTray element

        var newHeightPercentage = (vm.startHeight + deltaY) / windowHeight * 100; // Calculate the new height percentage
        console.log('Handle Drag - currentY:', currentY, 'deltaY:', deltaY, 'newHeightPercentage:', newHeightPercentage);

        // Restrict the new height percentage within the specified range
        newHeightPercentage = Math.max(vm.minHeightPercentage, Math.min(vm.maxHeightPercentage, newHeightPercentage));

        // Apply the new height to the measurementTray div
        tray.css('height', newHeightPercentage + '%');
    }
};

// Function to handle the end of dragging (mouse release or finger lift)
vm.endDrag = function () {
    if (vm.dragging) {
        vm.dragging = false;
        var tray = angular.element('.measurementTray'); // Select the measurementTray element
        var trayHeight = tray.height(); // Get the current height of the measurementTray div

        if (trayHeight < vm.minHeightPercentage) {
            project.showAllMeasurements(); // Call the showAllMeasurements function if height is less than 25%
        }

        console.log('End Drag');
    }
};

任何潜在客户将不胜感激。谢谢