使用 jQuery UI 可排序和引导网格复制 Hubspots 拖放表单构建器 UI

Posted 2023-05-08

【中文标题】使用 jQuery UI 可排序和引导网格复制 Hubspots 拖放表单构建器 UI

【英文标题】：Replicating Hubspots drag and drop form builder UI with jQuery UI Sortable and Bootstrap grid

【发布时间】：2020-11-16 21:00:04

【问题描述】：

Hubspot 有一个不错的拖放表单构建器 UI（参见下面的示例 gif），我正在尝试使用 Bootstrap 4 网格和jQuery UI sortable 复制它。

我的主要问题是 jQuery 可排序是非常字面的，所以我的“分隔符”会随着用户拖动交互而移动。理想情况下，我的设备会像 Hubspot 一样充当拖放区。

Hubspot 示例

目前的娱乐活动

gray = 空分隔符。希望这些成为拖放区。 red = 引导行 (.row) blue = 引导列 (.col) pink = 列内容。

在这里查看我目前的娱乐：https://jsfiddle.net/thelevicole/4wrn0tq1/1/

我的问题...您能帮助指导我改进实施吗？或者也许有替代解决方案？不必是 jQuery 或 Bootstrap。

任何建议都会很棒。

【参考方案1】：

我完全忘记了 Drag and Drop API，所以我已经解雇了 jQuery UI 可排序并能够创建所需的结果。

最值得注意的是这些事件......

$stage.on( 'dragstart', '.handle', function( event ) 
    // ...
 );

$stage.on( 'dragend', '.handle', function( event ) 
    // ...
 );

$stage.on( 'dragenter', '.row:empty, .col:empty', function( event ) 
    // ...
 );

$stage.on( 'dragover', '.row:empty, .col:empty', function( event ) 
    // ...
 );

$stage.on( 'dragleave', '.row:empty, .col:empty', function( event ) 
    // ...
 );

请在此处查看更新示例：https://jsfiddle.net/thelevicole/4wrn0tq1/2/

它肯定还没有准备好投入生产，但可能对寻找功能的人有所帮助。

这是它的 gif 供参考...

---

更新

对于任何有兴趣的人，我将把它的核心变成一个 jQuery 插件。您可以在GitHub here 上查看。可以在此处查看处于当前状态的插件的工作示例：https://thelevicole.com/ui-layouter/