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

Question

Hubspot 有一个很好的拖放表单生成器 UI（请参见下面的示例 gif），我正在尝试使用 Bootstrap 4 网格和 jQuery UI sortable.[=24= 进行复制]

我的主要问题是 jQuery sortable 非常直白，所以我的“分隔线”会随着用户拖动交互而移动。理想情况下，我的开发人员会像 Hubspot 一样充当拖放区。

Hubspot 示例

当前娱乐

gray = 空分频器。希望这些成为掉落区。
red = Bootstrap 行 (.row)
blue = Bootstrap 列 (.col)
pink = 栏目内容。

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

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

任何建议都很好。

Answer 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. A working example of the plugin in it's current state can be viewed here: https://thelevicole.com/ui-layouter/

上看到它

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

Replicating Hubspots drag and drop form builder UI with jQuery UI Sortable and Bootstrap grid

javascript

jquery

jquery-ui

twitter-bootstrap

bootstrap-4