Blazor 응용 프로그램에서 드래그 앤 드롭 기능을 구현하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2023-07-11 14:04 조회 292회 댓글 0건

본문

관련링크

ComponentOne Blazor 에디션에는 특별히 드래그 앤 드롭 작업을 위해 제작된 기능이 있습니다. 이 기능은 소스 형식을 변경하지 않고 항목을 한 곳에서 다른 곳으로 이동하는 데 유용합니다.

Blazor 서버와 웹 어셈블리 모두 다음과 같은 컨트롤에서 드래그 앤 드롭 기능이 지원됩니다.

FlexGrid

FlexGrid에는 데이터를 표시하기 위한 두 가지 모드가 있습니다. 바인드 모드는 데이터를 데이터베이스 또는 모델과 같은 다른 소스에 바인딩되는 FlexGrid에 표시하는 데에 사용됩니다.

바인딩되지 않은 모드는 적절한 모델 없이 데이터를 시각화하는 데 사용됩니다. 이 모드에서는 데이터가 FlexGrid에서 각 셀의 값을 설정하여 렌더링됩니다.

FlexGrid에서는 드래그 앤 드롭 기능이 열과 행에서 작동합니다. 이 기능을 사용하면 행 또는 열을 드래그하여 다른 위치로 이동할 수 있습니다.

드래그 앤 드롭 기능은 AllowDragging 속성을 GridAllowDragging 열거 속성으로 설정하여 FlexGrid를 위해 사용 설정할 수 있습니다.

바인드 모드 FlexGrid

바인드 모드 FlexGrid에서는, 데이터가 모델로부터 표시되므로, 업데이트된 데이터 위치를 DB에 저장할 수 없기 때문에 행 데이터를 한 위치에서 다른 위치로 이동하는 것이 의미가 없습니다.

따라서, 바인드 FlexGrid에서는 열만 끌어서 놓을 수 있습니다.

바인드 모드

다음은 FlexGrid 드래그 앤 드롭 기능과 바인딩하기 위한 코드입니다.

<FlexGrid ItemsSource="@forecasts" AllowDragging="GridAllowDragging.Columns" HeadersVisibility="GridHeadersVisibility.All"> 
</FlexGrid> 
 @code { 
    private WeatherForecast[] forecasts;  
    protected override async Task OnInitializedAsync() 
    { 
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now); 
    } 
}

FlexGrid의 바인딩되지 않은 모드

바인딩되지 않은 모드는 코드를 사용해 셀 값을 설정하여 FlexGrid에 데이터를 표시하는 데 사용됩니다. 따라서 데이터를 서버에 다시 저장하지 않아도 됩니다.

사용자는 바인딩되지 않은 모드의 FlexGrid를 사용하여 행과 열을 모두 끌어서 놓을 수 있습니다.

바인딩되지 않은 모드

다음은 FlexGrid와 드래그 앤 드롭 기능의 바인딩을 해제하기 위한 코드입니다.

<FlexGrid @ref="grid" AllowDragging="GridAllowDragging.Both" HeadersVisibility="GridHeadersVisibility.All" > 
    <FlexGridColumns> 
        @for (int i = 0; i < 5; i++) 
        { 
            <GridColumn Header="@string.Format("Column {0}",i+1)" ></GridColumn> 
        } 
    </FlexGridColumns> 
    <FlexGridRows> 
        @for (int i = 0; i < 5; i++) 
        { 
            <GridRow></GridRow> 
        } 
    </FlexGridRows> 
</FlexGrid> 
@code {  
    FlexGrid grid;  
    protected override void OnAfterRender(bool firstRender) 
    { 
        if (firstRender) 
        { 
            for (int i = 0; i < grid.Rows.Count; i++) 
            { 
                for (int j = 0; j < grid.Columns.Count; j++) 
                { 
                    grid[i, j] = string.Format("Cell {0},{1}", i + 1, j + 1); 
                } 
            }  
        } 
    } 
}

ComponentOne Blazor 라이브 데모 샘플을 다운로드해 보세요.

TreeView

TreeView 컨트롤은 계층 구조 데이터를 보는 데 사용됩니다. TreeView 항목은 드래그 앤 드롭 기능을 사용하여 순서를 다시 지정하고 다른 상위 노드로 이동할 수 있습니다.

TreeView 내의 드래그 앤 드롭

TreeView의 드래그 앤 드롭 기능은 AllowDragDrop 속성을 true로 설정하여 사용 설정할 수 있습니다. 사용자는 이 속성을 사용하여 TreeView 내에서 항목을 드래그 앤 드롭할 수 있습니다.

특정 노드에 항목을 드롭하지 못하도록 하기 위해, OnDragOver 이벤트를 처리하고 TreeViewDragDropEventArgs의 취소 속성을 true로 설정할 수도 있습니다.

treeview

다음은 TreeView에서 항목을 드래그 앤 드롭 하기 위한 코드입니다.

<FlexGrid @ref="grid" AllowDragging="GridAllowDragging.Both" HeadersVisibility="GridHeadersVisibility.All" > 
    <FlexGridColumns> 
        @for (int i = 0; i < 5; i++) 
        { 
            <GridColumn Header="@string.Format("Column {0}",i+1)" ></GridColumn> 
        } 
    </FlexGridColumns> 
    <FlexGridRows> 
        @for (int i = 0; i < 5; i++) 
        { 
            <GridRow></GridRow> 
        } 
    </FlexGridRows> 
</FlexGrid> 
@code {  
    FlexGrid grid;  
    protected override void OnAfterRender(bool firstRender) 
    { 
        if (firstRender) 
        { 
            for (int i = 0; i < grid.Rows.Count; i++) 
            { 
                for (int j = 0; j < grid.Columns.Count; j++) 
                { 
                    grid[i, j] = string.Format("Cell {0},{1}", i + 1, j + 1); 
                } 
            }  
        } 
    } 
}

TreeView 간 드래그 앤 드롭

이 기능은 사용자가 항목을 다른 TreeView 항목에 드래그 앤 드롭 할 수 있도록 허용하기 때문에 더 강력합니다. 예를 들어 DB의 가젯을 보여주는 TreeView와 사용자가 선택한 항목을 그룹화된 순서로 보여주는 TreeView가 있습니다.

이 경우 사용자에게는 한 TreeView에서 항목을 선택하여 위시 리스트에 드래그 하여 놓는 것이 더 편리합니다.

이를 위해서는, 대상 TreeView와 소스 TreeView가 같지 않은 경우 OnDragOver 이벤트를 처리하고 TreeViewDragDropEventArg 클래스의 취소 속성을 true로 설정해야 합니다.

TreeView

항목을 다른 TreeView로 이동하기 위한 코드입니다.

<div class="row"> 
    <div class="col-sm-4"> 
    <C1TreeView AllowDragDrop="true" ShowLines="true"  Style="@("width:100%;height:500px;")" OnDragOver="DragOverHandle" >  
    <TreeViewItem Header="Devices"> 
        <TreeViewItem Header="Mobiles"> 
            <TreeViewItem Header="Apple" />
            <TreeViewItem Header="Xiaomi" /> 
            <TreeViewItem Header="Nokia" /> 
        </TreeViewItem> 
        <TreeViewItem Header="Tablets" /> 
        <TreeViewItem Header="Monitor" /> 
    </TreeViewItem> 
    <TreeViewItem Header="Appliances"> 
        <TreeViewItem Header="Television" /> 
        <TreeViewItem Header="Washing Machine" /> 
    </TreeViewItem> 
</C1TreeView> 
</div> 
<div class="col-sm-4" > 
    <C1TreeView AllowDragDrop="true" ShowLines="true"  Style="@("width:100%;height:500px;")" OnDragOver="DragOverHandle">  
    <TreeViewItem Header="Devices"> 
        <TreeViewItem Header="Mobiles"> 
            <TreeViewItem Header="Apple" /> 
            <TreeViewItem Header="Xiaomi" /> 
            <TreeViewItem Header="Nokia" /> 
        </TreeViewItem> 
        <TreeViewItem Header="Tablets" /> 
        <TreeViewItem Header="Monitor" /> 
    </TreeViewItem> 
    <TreeViewItem Header="Appliances"> 
        <TreeViewItem Header="Television" /> 
        <TreeViewItem Header="Washing Machine" /> 
    </TreeViewItem> 
</C1TreeView> 
</div> 
</div> 
@code { 
    protected void DragOverHandle(object sender,TreeViewDragDropEventArgs arg) 
    { 
        if (arg.TargetDropTree == arg.TargetDragTree) 
        { 
            arg.Cancel = true; 
        } 
        else 
        { 
            arg.Cancel = false; 
        } 
    }   
}

Blazor 서버 샘플 다운로드 | Blazor WebAssembly 샘플 다운로드 | ComponentOne Blazor 샘플 오프라인