jQuery Layout插件拖拽调整时西面板调整器图标消失及样式失效求助

Let me walk you through resolving the two issues you're facing with the jQuery UI Layout west panel resizer in your AngularJS app:

Context #

You're using jQuery UI Layout with center, west, and north panels, configured to let users drag-resize the west panel. You've added a rotated icon to the vertical resizer and styled its :hover/:active states, but hit two frustrating problems.

The Problems #

• Disappearing icon: When you click and drag the resizer, the icon vanishes after a short movement, only reappearing once you release the mouse button.
• Lost hover/active styles: If you drag past the resizer's size limits (and move the cursor off the element mid-drag), the :hover styling disappears entirely, and the :active selector doesn't seem to trigger at all.

Solution #

After checking the jQuery UI Layout documentation, the key is leveraging the plugin's built-in state classes and ensuring your icon's display is explicitly enforced:

1. Update CSS to Use Drag-State Classes #

jQuery UI Layout automatically adds the .ui-layout-resizer-dragging class to the resizer when a drag operation is in progress. Use this class to maintain your desired styling instead of relying solely on :hover/:active (which fail when the cursor leaves the element mid-drag):

.ui-layout-resizer-west {
    border-left: 1px solid #dadee3;
    background: #f0f3f8;
    border-right: none;
    width: 8px !important;

    /* Ensure the icon never gets hidden by plugin styles */
    & .icon-dots-three-horizontal3 {
        display: block !important;
        visibility: visible !important;
    }

    /* Keep hover styles, and mirror them for the dragging state */
    &:hover,
    &.ui-layout-resizer-dragging {
        border-right: 1px solid #dadee3;
        background: #E1EAF2;
        cursor: move !important;
        cursor: -moz-grab !important;
        cursor: -webkit-grab !important;
    }

    /* Update cursor to indicate active drag */
    &.ui-layout-resizer-dragging {
        cursor: -moz-grabbing !important;
        cursor: -webkit-grabbing !important;
    }
}

2. Secure the Icon's Display in Your JavaScript #

Modify your icon-adding logic to explicitly enforce its visibility properties, so the plugin can't override it during drag operations:

_self.setResizableLayout = function() {
    $timeout(function () {
        const westResizer = $('.ui-layout-resizer-west');
        westResizer.attr('ng-attr-title', "{{'drag' | translate}}");
        
        // Append the icon with enforced display/visibility styles
        westResizer.append(`<span class="icon-dots-three-horizontal3" style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); font-size: 5px; display: block !important; position: absolute; top: 50%; margin-left: -4px; opacity: 0.6; visibility: visible!important;"></span>`);
    }, 200);
}

Why This Works #

• The .ui-layout-resizer-dragging class stays applied for the entire duration of the drag, so your styling remains consistent even if the cursor moves off the resizer.
• Adding display: block !important and visibility: visible !important to the icon prevents the plugin from hiding it when it modifies the resizer's DOM during dragging operations.

内容的提问来源于stack exchange，提问作者Felipe Wagner