单击开头和DIV堆叠遇到问题

问题描述

我正在尝试设置一个类似于Windows的页面。有一些可拖动和可调整大小的分层DIV。我想这样做，以便在单击窗口时将其置于最前面。

如果我使用可拖动堆栈功能，则该功能通常会按预期工作，但仅当您单击并拖动窗口时才起作用。如果我只单击但不拖动，则希望它仍然像拖动一样显示在最前面。

 $('.window').click(function(){
            $('.ui-front').removeClass('ui-front');
            $(this).addClass('ui-front');
        });

这是我尝试过的一种jsfiddle： http://jsfiddle.net/wLe261mh

但是，这不能使图层从一次单击到另一次单击保持正确。尝试使红色变成黄色，例如不带灰色。 这是与可拖动堆栈功能相同的基本功能，但效果更好，但仅在拖动时有效。 （它也似乎破坏了点击前面板的选项） $( ".ui-draggable" ).draggable({ cancel: '.text',stack: ".ui-draggable" }) http://jsfiddle.net/wLe261mh/1

有更好的方法吗？如果我能够像可拖动堆栈功能那样工作，并且不必跟踪z小数和每个元素的加/减数，那将很棒。如果我有7-8个窗口来跟踪，可能会很快失控。

解决方法

请尝试将鼠标按下而不是单击。单击仅在鼠标按下后注册，然后在鼠标按下后注册，因此如果按住鼠标并拖动鼠标将不会触发点击。

,

我找到了实现您所寻找目标的一种about回方式。

如果您将this script合并到站点中的某个地方，则可以将InAppNotification更改为；

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <NavigationView
        x:Name="MainNavigationView"
        Grid.Row="1"
        IsBackButtonVisible="Collapsed"
        IsBackEnabled="True"
        ItemInvoked="MainNavigationView_ItemInvoked"
        PaneClosing="MainNavigationView_PaneClosing"
        PaneOpening="MainNavigationView_PaneOpening"
        Style="{StaticResource MainNavigationViewStyle}"
        TabNavigation="Cycle">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Frame
                x:Name="NaviFrame"
                IsNavigationStackEnabled="True"
                Navigated="NaviFrame_Navigated" />
            <--- Problem below！！！ --->
            <localControls:MultiSelectCommandBar x:Name="BottomMultiSelectCommandBar" Grid.Row="1" />
        </Grid>
    </NavigationView>
    <Grid
        x:Name="AppTitleBar"
        Height="32"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Background="Transparent">
        <Border
            x:Name="AppTitleBorder"
            Width="{x:Bind MainNavigationView.OpenPaneLength,Mode=OneWay}"
            HorizontalAlignment="Left"
            VerticalAlignment="Stretch"
            Background="Transparent" />
        <TextBlock
            x:Name="AppTitle"
            x:Uid="AppTitle"
            Height="{x:Bind AppTitleBar.Height,Mode=OneWay}"
            Padding="10,8"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Style="{StaticResource CaptionTextBlockStyle}"
            Visibility="Collapsed" />
    </Grid>
    <Button
        x:Name="BackButton"
        x:Uid="BackButton"
        Background="Transparent"
        Click="BackButton_Click"
        Style="{StaticResource BackButtonStyle}"
        Visibility="Collapsed" />
    <Button
        x:Name="FakeTogglePaneButton"
        Grid.Row="1"
        VerticalAlignment="Top"
        Background="{StaticResource MinimalTitleBarColor}"
        Click="FakeTogglePaneButton_Click"
        Visibility="Collapsed">
    </Button>
    <local:MediaControl
        x:Name="MainMediaControl"
        Grid.Row="2"
        Mode="Main" />
    <local:LoadingControl
        x:Name="MainLoadingControl"
        Grid.RowSpan="3"
        AllowBreak="True"
        Visibility="Collapsed" />
    <controls:InAppNotification
        x:Name="ShowResultInAppNotification"
        Grid.Row="1"
        AnimationDuration="0:0:0.1"
        HorizontalOffset="0"
        ShowDismissButton="True"
        StackMode="Replace"
        VerticalOffset="100" />
    <controls:InAppNotification
        x:Name="UndoInAppNotification"
        Grid.Row="1"
        AnimationDuration="00:00:00.1"
        HorizontalOffset="0"
        StackMode="Replace"
        VerticalOffset="100">
    </controls:InAppNotification>
</Grid>

您可以在这里看到有效的演示：https://jsfiddle.net/rf7cowe3/

基本上，类$('.window').click(function(){})似乎破坏了可拖动对象的整个$('.window').click(function(){ $(this).simulate('drag'); }); 功能-因此，我不得不找到一种在点击时触发“拖动”事件的方法，以便欺骗该功能以便适当地排列z索引。

,

我发现它内置在可拖动的“ Distance：0”的一部分中，即使它没有被拖动，它也可以利用堆栈。

 $( ".ui-draggable" ).draggable({ cancel: '.text',stack: ".ui-draggable",distance: 0 })

如果使用“取消”部分允许突出显示文本，则仍然不理想，因为那样便无法单击文本部分。但是我想发布这个答案，以防其他人受益。上面的“模拟”答案似乎仍然有效，即使在文本区域也是如此