Unable to drag/drop a widget into different zone

[MikeAlhayek]

Describe the begin the widgets UI, we are unable to drag/drop a widget into a zone that has no widgets.

[jtkech]

Just had a customer saying that dragging widgets no longer works.

But we only upgraded to OC 1.4 as I remember, so was a quite old issue

[MikeAlhayek]

can you confirm is is no longer an issue in 1.8-previews?

[jtkech]

Yes looks like it works.

Can you describe what you did to fix it? So that I can provide an override

Is it just because the list-group.zones was removed at some point?

[MikeAlhayek]

@jtkech thanks for confirming.
2 important changes.

1. Add the following to the https://github.com/OrchardCMS/OrchardCore/blob/main/src/OrchardCore.Modules/OrchardCore.Layers/Views/Admin/Index.cshtml view if ui-sortable does no have min-height.

<style at="Head">
.ui-sortable {
   min-height: 1rem;
}
</style>

Then make sure <ul class="list-group zones... tag is printed even if contentItems.Count ==0

[jtkech]

I added the style

Then make sure <ul class="list-group zones... tag is printed even if contentItems.Count ==0

It is but still doen't work, no problem I will find why

[MikeAlhayek]

The problem was is that the ul was not visible when there is no widgets.

Also, the UI has no min height to allow you to drop widget into. So printing UI with no children along with min-height should fix it. That is the essential fix I did. Maybe version 1.4 has other issues

[jtkech]

No problem, I can fix it by copy pasting the last version of the view and fix compilation.

Looking at the differences to understand

[jtkech]

Okay, in the following the properties class was missing.

<div class="w-100 cursor-move properties">

Good to know so that I can fix it without having to do a custom Admin Theme just for this ;)

[MikeAlhayek]

Oh that's right! Glad you found it!

[jtkech]

For people having the same issue

// Fix widget drag and drop in OC version 1.4, can be removed in a future version.
public class WidgetDragAndDropFixFilter : IAsyncResultFilter
{
    private readonly IResourceManager _resourceManager;

    public WidgetDragAndDropFixFilter(IResourceManager resourceManager) => _resourceManager = resourceManager;

    public Task OnResultExecutionAsync(ResultExecutingContext context, ResultExecutionDelegate next)
    {
        if (context.HttpContext.Request.Path == "/Admin/Layers")
        {
            var script = new HtmlString("<script>$(function () { $('.list-group.zones .cursor-move').addClass(\"properties\"); });</script>");
            _resourceManager.RegisterFootScript(script);
        }

        return next.Invoke();
    }
}