Drag and Drop Only on the Server Side
#backend#frontend#opensource#webformscore
Elanat Framework

Elanat Framework @elanatframework

About: Elanat Team

Joined:
Jun 21, 2023

Drag and Drop Only on the Server Side

Publish Date: Jun 9
1 0

WebForms Core 1.8 is coming soon.

WebForms Core is an ambitious technology that was announced in 2024 by Elanat. In this technology, DOM elements in HTML are managed by server-side code.

In this version, we will also have access to mouse position and pressed keys; so we can do the most interactive UIs without the need for JavaScript and front-end frameworks, only through the server.

In this example, the execution of events is requested from the server in a lazy way; so no additional bandwidth is consumed before the events. All responses are also cached on the server and each request only goes to the server once.

Watch the video below and enjoy the stunning performance of WebForms Core technology.

Controller

using CodeBehind;

public partial class DragAndDropController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        new ClientCache(context.Response.Headers).Set(31536000); // One Years Cache

        if (context.Request.Query.ContainsKey("dragstart"))
        {
            Item_OnDragStart(context);
            return;
        }

        if (context.Request.Query.ContainsKey("dragover"))
        {
            Item_OnDragOver(context);
            return;
        }

        if (context.Request.Query.ContainsKey("dragleave"))
        {
            Item_OnDragLeave(context);
            return;
        }

        if (context.Request.Query.ContainsKey("drop"))
        {
            Item_OnDrop(context);
            return;
        }

        if (context.Request.Query.ContainsKey("dragend"))
        {
            Item_OnDragEnd(context);
            return;
        }

        WebForms form = new WebForms();

        form.SetGetEvent(InputPlace.QueryAll("#dragZone div"), HtmlEvent.OnDragStart, "?dragstart");
        form.SetGetEvent(InputPlace.QueryAll("#dragZone div"), HtmlEvent.OnDragEnd, "?dragend");

        form.SetPreventDefaultEvent("dropZone", HtmlEvent.OnDragOver);
        form.SetGetEvent("dropZone", HtmlEvent.OnDragOver, "?dragover");
        form.SetGetEvent("dropZone", HtmlEvent.OnDragLeave, "?dragleave");
        form.SetGetEvent("dropZone", HtmlEvent.OnDrop, "?drop");

        Control(form);
    }

    private void Item_OnDragStart(HttpContext context)
    {
        WebForms form = new WebForms();

        form.SaveOuterText("$");
        form.InsertClass("$", "hide");

        Control(form, true);
    }

    private void Item_OnDragOver(HttpContext context)
    {
        WebForms form = new WebForms();

        form.InsertClass("dropZone", "highlight");

        Control(form, true);
    }

    private void Item_OnDragLeave(HttpContext context)
    {
        WebForms form = new WebForms();

        form.DeleteClass("dropZone", "highlight");

        Control(form, true);
    }

    private void Item_OnDrop(HttpContext context)
    {
        WebForms form = new WebForms();

        form.AddText("dropZone", Fetch.Saved());
        form.Delete(InputPlace.Query("#dragZone .hide"));

        Control(form, true);
    }

    private void Item_OnDragEnd(HttpContext context)
    {
        WebForms form = new WebForms();

        form.DeleteClass("$", "hide");
        form.AssignDelay(.01f);

        Control(form, true);
    }
}
Enter fullscreen mode Exit fullscreen mode

View

@page
@controller DragAndDropController
<!DOCTYPE html>
<html>
<head>
    <title>WebForms Core Drag & Drop Example</title>
    <script type="text/javascript" src="/script/web-forms.js"></script>
    <meta charset="utf-8" />
    <style>
        #dropZone {
            width: 600px;
            height: auto;
            min-height: 200px;
            border: 2px dashed #ccc;
            border-radius: 5px;
            text-align: center;
            padding: 20px;
            margin: 20px auto;
        }
        #dropZone.highlight {
            border-color: #4CAF50;
            background-color: #f8f8f8;
        }
        .dragitem {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 100px;
            cursor: move;
            margin: 20px auto;
        }
        .hide {
        display: none
        }
    </style>
</head>
<body>
    <div id="dragZone">
        <div class="dragitem" draggable="true">Drag me! 1</div>
        <div class="dragitem" draggable="true">Drag me! 2</div>
        <div class="dragitem" draggable="true">Drag me! 3</div>
        <div class="dragitem" draggable="true">Drag me! 4</div>
    </div>
    <div id="dropZone">Drop here</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

What server sends to client?

According to the following materials, the server response is very small:

Drag Start ("?dragstart"):

[web-forms]
@go$=.
ic$=hide
Enter fullscreen mode Exit fullscreen mode

Drag Over ("?dragover"):

[web-forms]
icdropZone=highlight
Enter fullscreen mode Exit fullscreen mode

Drag Leave ("?dragleave")

[web-forms]
dcdropZone=highlight
Enter fullscreen mode Exit fullscreen mode

Drop ("?drop"):

[web-forms]
atdropZone=@cl.
de*#dragZone .hide=1
Enter fullscreen mode Exit fullscreen mode

Drag End ("?dragend"):

[web-forms]
:0.01)dc$=hide
Enter fullscreen mode Exit fullscreen mode

Comments 0 total

    Add comment