Blazor C#：如何将外部卡片拖拽至Scheduler组件指定时段？

一、使用Telerik原生拖拽组件实现 #

Telerik Blazor的DragDrop组件可以和Scheduler无缝配合，以下是具体实现步骤：

1. 配置左侧可拖拽工单卡片 #

用TelerikDragDropZone包裹左侧卡片，绑定工单数据并设置拖拽模式：

<TelerikDragDropZone Data="@WorkOrders" DragMode="DragMode.Auto">
    <Template>
        @foreach (var workOrder in context)
        {
            <div class="work-order-card" @key="workOrder.Id">
                <h4>@workOrder.Title</h4>
                <p>@workOrder.Description</p>
            </div>
        }
    </Template>
</TelerikDragDropZone>

后台定义工单模型：

public class WorkOrder
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public TimeSpan Duration { get; set; } = TimeSpan.FromHours(1); // 默认工单时长
}

2. 将Scheduler配置为可放置区域 #

在Scheduler内部嵌套TelerikDropZone，监听OnDrop事件处理拖拽数据：

<TelerikScheduler @bind-Data="@SchedulerEvents"
                  StartTime="@new DateTime(2024, 1, 1, 8, 0, 0)"
                  EndTime="@new DateTime(2024, 1, 1, 18, 0, 0)"
                  View="SchedulerViewType.Day">
    <SchedulerViews>
        <SchedulerDayView></SchedulerDayView>
    </SchedulerViews>
    <TelerikDropZone OnDrop="@OnWorkOrderDropped">
        <ChildContent>
            <SchedulerToolbar>
                <SchedulerToolbarItem Command="SchedulerToolbarCommand.Today"></SchedulerToolbarItem>
            </SchedulerToolbar>
        </ChildContent>
    </TelerikDropZone>
</TelerikScheduler>

3. 处理拖拽放置逻辑 #

在OnWorkOrderDropped事件中，将拖拽的工单转换为Scheduler日程事件：

private void OnWorkOrderDropped(DropEventArgs args)
{
    if (args.DragData is WorkOrder droppedWorkOrder && args.DropTargetInfo is SchedulerDropTargetInfo dropInfo)
    {
        var newEvent = new SchedulerEvent
        {
            Id = Guid.NewGuid(),
            Title = droppedWorkOrder.Title,
            Description = droppedWorkOrder.Description,
            Start = dropInfo.DateTime,
            End = dropInfo.DateTime.Add(droppedWorkOrder.Duration)
        };
        SchedulerEvents.Add(newEvent);
        StateHasChanged();
    }
}

注：SchedulerEvent需包含Telerik Scheduler要求的核心字段：Id、Title、Start、End。

二、自定义HTML5拖拽实现（不依赖Telerik组件） #

如果不想依赖Telerik的DragDrop组件，可直接使用HTML5原生拖拽API：

1. 设置左侧卡片为可拖拽对象 #

给卡片添加draggable="true"属性，监听ondragstart保存拖拽数据：

@foreach (var workOrder in WorkOrders)
{
    <div class="work-order-card" 
         draggable="true" 
         @ondragstart="(() => OnDragStart(workOrder))"
         @key="workOrder.Id">
        <h4>@workOrder.Title</h4>
        <p>@workOrder.Description</p>
    </div>
}

后台处理拖拽开始事件：

private WorkOrder DragDropData { get; set; }

private void OnDragStart(WorkOrder workOrder)
{
    DragDropData = workOrder;
}

2. 配置Scheduler时段为可放置区域 #

通过TimeSlotTemplate给每个时段添加拖拽事件监听：

<TelerikScheduler @bind-Data="@SchedulerEvents"
                  StartTime="@new DateTime(2024, 1, 1, 8, 0, 0)"
                  EndTime="@new DateTime(2024, 1, 1, 18, 0, 0)"
                  View="SchedulerViewType.Day">
    <SchedulerViews>
        <SchedulerDayView>
            <TimeSlotTemplate>
                <div class="time-slot"
                     @ondragover="OnDragOver"
                     @ondrop="(() => OnDrop(context.Start))">
                    @context.Start.ToShortTimeString()
                </div>
            </TimeSlotTemplate>
        </SchedulerDayView>
    </SchedulerViews>
</TelerikScheduler>

3. 处理拖拽核心逻辑 #

• 阻止拖拽默认行为，允许放置：

private void OnDragOver(DragEventArgs args)
{
    args.PreventDefault();
}

• 完成放置，创建新的Scheduler事件：

private void OnDrop(DateTime targetTime)
{
    if (DragDropData != null)
    {
        var newEvent = new SchedulerEvent
        {
            Id = Guid.NewGuid(),
            Title = DragDropData.Title,
            Description = DragDropData.Description,
            Start = targetTime,
            End = targetTime.Add(DragDropData.Duration)
        };
        SchedulerEvents.Add(newEvent);
        DragDropData = null;
        StateHasChanged();
    }
}

4. 添加交互样式 #

增强拖拽时的视觉反馈：

.work-order-card {
    padding: 1rem;
    border: 1px solid #ccc;
    margin: 0.5rem 0;
    cursor: grab;
}

.time-slot.drop-over {
    background-color: #e8f4f8;
}

可在ondragover时给时段添加drop-over类，ondragleave时移除，提升交互体验。

内容的提问来源于stack exchange，提问作者Prashil Shah