Draggable can be possible?

Radzen.Blazor Components
1

Hello,

Is there a way to drag placeholders (formatted text) into a RadzenHtmlEditor from another component or area? Currently, I'm having trouble identifying the dragged item in the drag event.

Any insights would be greatly appreciated!

2

Hi @Gurjeet_Singh,

Usually one stores the dragged item when the drag starts. Not sure what your implementation is. Could you show us some runnable code?

3

hi @korchev thanks for reply

My scenario is that I want to add some placeholders (some text with style) by dragging to my RadzenHTMLEditor.

image
image1579×781 70.9 KB

Hope this will help

4

Some code would help a lot more :slight_smile: You can use our online demo - they are editable.

5

Here is my code:



<RadzenHtmlEditor @ref="HtmlEditor" @bind-Value=@Body style="min-height: 370px;" />


Placeholders

                                <RadzenButton Variant="Variant.Filled" Shade="Shade.Default" Click="() => OnAddPlaceholder()" ButtonStyle="ButtonStyle.Light" class="rz-p-3 w-100 rz-text-align-start align-items-center rz-display-flex">
                                    <RadzenText TextStyle="TextStyle.DisplayH6" Text="SomePlaceholder" class="fw-400" />
                                </RadzenButton>                             
                        </RadzenStack>
                    </RadzenColumn>

Code:
public string Body {get;set;}
public RadzenHtmlEditor HtmlEditor { get; set; }
protected async void OnAddPlaceholder()
{
string placeholderHtml = $"<span contenteditable="false" class="workflow-placeholder">Some placeholder ";
await HtmlEditor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, placeholderHtml);
await HtmlEditor.FocusAsync();
StateHasChanged();
}

6

Here is a demo which would allow you to drag and drop items:

<RadzenDropZoneContainer TItem="MyTask" Data="data"
                         ItemSelector="@ItemSelector"
                         Drop="@OnDrop">
    <ChildContent>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" class="rz-p-12">
            <RadzenDropZone Value="@("Editor")">
            <RadzenHtmlEditor @ref=editor>
            </RadzenHtmlEditor>
            </RadzenDropZone>

            <RadzenDropZone Value="@("Items")" class="rz-display-flex rz-flex-column rz-background-color-warning-lighter rz-border-warning-light rz-border-radius-2 rz-p-4" >

            </RadzenDropZone>
        </RadzenStack>
    </ChildContent>
    <Template>
        <strong>@context.Name</strong>
    </Template>
</RadzenDropZoneContainer>

@code {
    RadzenHtmlEditor editor;
    // Filter items by zone value
    Func<MyTask, RadzenDropZone<MyTask>, bool> ItemSelector = (item, zone) => zone.Value == "Items";

    async Task OnDrop(RadzenDropZoneItemEventArgs<MyTask> args)
    {
       await editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, args.Item.Name);
    }

    IList<MyTask> data;

    protected override void OnInitialized()
    {
        data = Enumerable.Range(0, 5)
            .Select(i => 
                new MyTask() 
                { 
                    Id = i, 
                    Name = $"Task{i}", 
                  
                })
            .ToList();
    }

    public class MyTask
    {
        public int Id { get; set; }
        public string Name { get; set; }
       
    }
}

Have in mind that new items will be inserted at the beginning of the content if you use ExecuteCommandAsync.

If you want to append use this:

<RadzenDropZoneContainer TItem="MyTask" Data="data"
                         ItemSelector="@ItemSelector"
                         Drop="@OnDrop">
    <ChildContent>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" class="rz-p-12">
            <RadzenDropZone Value="@("Editor")">
            <RadzenHtmlEditor @ref=editor @bind-Value=@html>
            </RadzenHtmlEditor>
            </RadzenDropZone>

            <RadzenDropZone Value="@("Items")" class="rz-display-flex rz-flex-column rz-background-color-warning-lighter rz-border-warning-light rz-border-radius-2 rz-p-4" >

            </RadzenDropZone>
        </RadzenStack>
    </ChildContent>
    <Template>
        <strong>@context.Name</strong>
    </Template>
</RadzenDropZoneContainer>

@code {
    RadzenHtmlEditor editor;
    // Filter items by zone value
    Func<MyTask, RadzenDropZone<MyTask>, bool> ItemSelector = (item, zone) => zone.Value == "Items";
    
    string html;

    void OnDrop(RadzenDropZoneItemEventArgs<MyTask> args)
    {
       // append html
       html = html + args.Item.Name;
    }

    IList<MyTask> data;

    protected override void OnInitialized()
    {
        data = Enumerable.Range(0, 5)
            .Select(i => 
                new MyTask() 
                { 
                    Id = i, 
                    Name = $"Task{i}", 
                  
                })
            .ToList();
    }

    public class MyTask
    {
        public int Id { get; set; }
        public string Name { get; set; }
       
    }
}
7

Is it possible to insert an item at the location where the user drags it in the editor?

8

No, this is not possible.

1 Like
9

"Thanks for your response! So far, it's been really impressive."