在Blazor中实现拖放(drag and drop)

前言

我在实现一个含有待办列表功能的页面时，发现了一个好看的设计，它将待办分为——“待办”，“正在进行”，和“已完成”三种状态，并且将待办通过拖拽的方式在这三种状态之间进行切换。

这种方式看起来真不错，但是使用Blazor来实现这种拖拽效果看起来似乎并不太容易。

经过一番百度难以找到，最后搜索英文通过Google找到了合适的解决方案。

感谢Chris Sainty的博客，通过学习他的代码，最终实现了自己想要的效果。

解决方案

需要实现的目标：

• 跟踪用户正在拖拽的项目

• 控制该项目在哪里可以掉落

• 反馈给用户哪些列表可以掉落，哪些不能

• 鼠标松开时更新项目

数据结构：

public class TodoItemDto
{
    public int Id { get; set; }
    public string Title { get; set; }

    public string Description { get; set; }

    public TodoStatusEnum Status { get; set; }

    /// <summary>
    /// 截止日期
    /// </summary>
    public DateTime ClosingDate { get; set; }

    /// <summary>
    /// 标签
    /// </summary>
    public string Tag { get; set; }

    public bool IsImportant { get; set; }

    public int RepeatTimes { get; set; }
}

public enum TodoStatusEnum
{
    Todo,                     // 待办
    InProgress,               // 正在进行
    Completed                 // 已完成
}

Components

使用三个组件来实现该效果：

• TodoContainer.razor

  • 使用TodoContainer包含Todo，InProgress，Completed三个待办列表
  • 跟踪容器内被用户拖拽的项目
  • 包含一个事件供状态更新时调用

  TodoContainer.razor

  <div class="todo-view-content-layout">
      @* 将自己作为级联参数传递给子组件（TodoList) *@
      <CascadingValue Value="this">
          @ChildContent
      </CascadingValue>
  </div>
  

  TodoContainer.razor.cs

  [Parameter] public List<TodoItemDto> Todos { get; set; }
  [Parameter] public RenderFragment ChildContent { get; set; }
  
  public TodoItemDto Payload { get; set; }  // 这个属性用来跟踪被用户拖拽的待办项
  
  /// <summary>
  /// 当子组件更新状态时，调用父组件的该方法，改变待办集合中被拖拽项的状态
  /// </summary>
  /// <param name="newStatus"></param>
  public async Task UpdateJobAsync(TodoStatusEnum newStatus)
  {
      var task = Todos.SingleOrDefault(x => x.Id == Payload.Id);
  
      if (task != null)
      {
          task.Status = newStatus;
          task.ClosingDate = DateTime.Now;
          await InvokeAsync(StateHasChanged);
      }
  }
  

• TodoList.razor

  • 使用TodoList包含 每个状态 的待办列表（一共三个TodoList）
  • 当用户拖拽待办经过列表时呈现不同的UI效果

  TodoList.razor

  <div class="todo-view-content-item-layout @_dropClass">
      <div class="todo-view-content-item">
          @* 展示第一行，标题和任务数等（代码省略） *@
          ...
          @* 展示第二行，添加栏（代码省略）*@
          ...
          @* 第三行展示任务列表 *@
          <div class="todo-view-content-list"
              // 调用html5关于拖拽的原生API，默认（default）阻止其它容器拖拽项目，(preventDefault)则允许容器进行拖拽放置
               ondragover="event.preventDefault();"
              // 启用FireFox浏览器对拖放的支持
               ondragstart="event.dataTransfer.setData('', event.target.id);"
              // 当用户进行放置操作时调用HandleDrop方法
               @ondrop="HandleDrop"
              // 当用户进入该list范围时调用HandleDragEnter来判断能不能放置
               @ondragenter="HandleDragEnter"
              // 当用户离开list范围后将dropClass置为默认状态
               @ondragleave="HandleDragLeave">
  
              @foreach (var todo in Todos)
              {
                  <TodoDisplay TodoItem="todo"/>
              }
          </div>
      </div>
  </div>
  

  TodoList.razor.cs

  [CascadingParameter] TodoContainer Container { get; set; }
  [Parameter] public TodoStatusEnum ListStatus { get; set; }
  [Parameter] public TodoStatusEnum AllowedStatuses { get; set; }
  
  List<TodoItemDto> Todos = new List<TodoItemDto>();
  private string _dropClass = "";  // 用来判断当前list能否放置
  
  protected override void OnParametersSet()
  {
      Todos.Clear();
      Todos.AddRange(Container.Todos.Where(x => x.Status == ListStatus));
  }
  
  private void HandleDragEnter()
  {
      if (ListStatus == Container.Payload.Status) return;
  
      if (AllowedStatuses != Container.Payload.Status)
      {
          _dropClass = "can-drop";
      }
  }
  
  private void HandleDragLeave()
  {
      _dropClass = "";
  }
  
  private async Task HandleDrop()
  {
      _dropClass = "";
  
      if (AllowedStatuses == Container.Payload.Status) return;
  
      await Container.UpdateJobAsync(ListStatus);
  }
  

• TodoDisplay.razor

  • 这个组件用来展示单个待办
  • 当它被拖拽的时候就通知父组件（TodoContainer）跟踪它

  该组件代码逻辑很简单，但是html的代码量过多就不展示了

TodoDisplay.razor

<div class="draggable" draggable="true" title="@TodoItem.Title" @ondragstart="@(() => HandleDragStart(TodoItem))">
    // 内容（待办展示）...
</div>

TodoDisplay.razor.cs

[CascadingParameter] TodoContainer Container { get; set; }
[Parameter] public TodoItemDto TodoItem { get; set; }

/// <summary>
/// 通过每次drag开始将Container的Payload赋值以跟踪被拖拽的待办项
/// </summary>
/// <param name="selectedJob"></param>
private void HandleDragStart(TodoItemDto selectedJob)
{
    Container.Payload = selectedJob;
}

使用

从TodoView.razor中进行调用

@page "/todo"
@attribute [Authorize]

<div class="todo-layout">
    <TodoViewTitle></TodoViewTitle>
    <TodoContainer Todos="Todos">
        <TodoList ListStatus="TodoStatusEnum.Todo" AllowedStatuses="TodoStatusEnum.Todo"/>
        <TodoList ListStatus="TodoStatusEnum.InProgress" AllowedStatuses="TodoStatusEnum.InProgress"/>
        <TodoList ListStatus="TodoStatusEnum.Completed" AllowedStatuses="TodoStatusEnum.Completed"/>
    </TodoContainer>
</div>

@code {

    List<TodoItemDto> Todos = new List<TodoItemDto>
    {
        new TodoItemDto()
        {
            Id = 1,
            Title = "开发大创项目右侧状态栏",
            Description = "无",
            IsImportant = true,
            RepeatTimes = 1,
            Tag = "工作",
            ClosingDate = DateTime.Now
        },
        new TodoItemDto()
        {
            Id = 12,
            Title = "每日背单词",
            Description = "无",
            IsImportant = true,
            RepeatTimes = 1,
            Tag = "学习",
            ClosingDate = DateTime.Now
        },
        new TodoItemDto()
        {
            Id = 11,
            Title = "AAAAAAAAAA",
            Description = "无",
            IsImportant = true,
            RepeatTimes = 1,
            Tag = "工作",
            ClosingDate = DateTime.Now
        },
        new TodoItemDto()
        {
            Id = 111,
            Title = "BBBBBBBBBBBB",
            Description = "无",
            IsImportant = true,
            RepeatTimes = 1,
            Tag = "工作",
            ClosingDate = DateTime.Now
        },
        new TodoItemDto()
        {
            Id = 2,
            Title = "CCCCCCCCCCCCCCCC",
            Description = "无",
            IsImportant = true,
            RepeatTimes = 1,
            Tag = "工作",
            ClosingDate = DateTime.Now
        }
    };
}

实现效果如下：

进行拖拽...

拖拽成功！