Drag/drop JHipster 中重新排序的列表：推荐什么？

Question

正在寻找一些 advice/guidance。我想在 JHipster 6.7.1 中实现（我认为这是一个非常标准的功能）drag/drop 可重新排序的列表。

具体来说，假设您创建了一个定制的对象排序列表。除了列表中的 adding/removing 项外，用户还需要对列表重新排序。例如，假设希望 [Epsilon] 排在第二位（在 [Alpha] 之后）：

(before)         (after)
[Alpha]          [Alpha]
[Beta] \---+     [Epsilon]
[Gamma]    |     [Beta]
[Delta]    |     [Gamma]
[Epsilon]--+     [Delta]

只需 drag/drop [Epsilon] 到 [Alpha] 和 [Beta] 之间的某处，然后将其删除。该列表以新顺序重新呈现。完毕。显然，在后端，代码必须 persist/manage 新 indices/ordering，但用户体验直观且快速。

drag/drop 可重新排序将允许用户快速将项目拖放到任何所需的排序中。这些年来，我已经使用简单的 JavaScript 库多次实施此类操作。我希望 JHipster 6.7.1 能帮助快速找到一个好的现代解决方案。

Ng-bootstrap 似乎只提供静态工具。（没有drag/drop。）

Angular Materials looks perfect!! After struggling to get things moving in JHipster, even trying the JHipster Angular Material generator, I learnt to my amazement that JHipster does not (and may never) support Angular Materials！关于 Bootstrap 踩到 Angular Material 的脚趾... 好的.

然后我尝试了 SortableJS using ngx-sortable。运气不好。

我发现一些对 PrimeNG as a popular toolset for JHipster developers. These Drag/Drop set of directives look useful, but no examples show a simple reorderable list (dragging from one list to another is not what I am talking about). The picklist directives 的引用也不是我要找的。我会继续玩 PrimeNG...

与此同时，我没有自己挣扎，而是向 Whosebug 上的好人寻求一些智慧。

有人在 JHipster 应用程序中实现了简单的 drag/drop 列表顺序机制吗？
library/method 在 JHipster 中有什么作用？ SortableJS/NGX-SortableJS 对你有用吗？总理？还有别的吗？
我注意到一个叫做 NG-Dragula 的东西...有人在 JHipster 应用程序中尝试过吗？
我应该使用 Vue、React 还是其他前端（而不是 Angular）？这会为我提供更大的灵活性吗？
我是不是想多了。并遗漏了一些明显的东西？

我真的很想尝试使用 JHipster/Angular，但我处于开发初期，可以接受其他选项...

提前致谢！

[开发环境为：Windows10 Pro； IntelliJ 2019.3.3； OpenJDK 13；节点 12.15.0； npm 6.13.7； Gradle6.1.1; Chromev80.0.3987.116]

[PS：我很乐意提供更多详细信息。问就是了！]

Answer 1

玩完 PrimeNG, I found OrderList, which provides a drag/drop reordering. It is not as simple and elegant as the Angular Material 版本后。在某些方面，它更雄心勃勃，也许有点过度设计。有时少即是多，需要对 "dumb down" 小部件进行工作，但到目前为止它可以正常工作。

非常感谢Jochen Gebsattel for the link to the 。就像一个魅力。

之后，我将以下内容添加到我的模块中：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { OrderListModule } from 'primeng/orderlist';

...

@NgModule({
  imports: [..., BrowserAnimationsModule, OrderListModule],
  ...
})
export class ...Module {}

我将以下内容添加到我的组件中：

export class ...Component implements OnInit, OnDestroy {
books: string[] = [
                    'Moby Dick',
                    'Brave New World',
                    'Great Expectations',
                    'Wuthering Heights',
                    'King James Bible'
                  ];
lheight: string;

...

  ngOnInit(): void {
    this.lheight = String( 41 * this.books.length ) + 'px';
  }

...

  onReorder(): void {
    console.log(this.books); // eslint-disable-line no-console
  }

}

然后我将以下内容添加到我的组件模板中：

...

<p-orderList [value]="books" dragdrop="true" (onReorder)="onReorder()" [listStyle]="{'height': lheight}">
  <ng-template let-book pTemplate="item">
    <div class="ui-helper-clearfix">
      <p>{{book}}</p>
    </div>
  </ng-template>
</p-orderList>

...

注意，lheight 属性允许我动态调整列表的大小 window 因此所有项目始终可见。

PrimegNG 看起来有一些不错的功能。不是Angular Material，而是我老爷爷常说的："If you can't get the one you love, you best love the one you can get!".

Answer 2

从 Sudharaka 的演示项目开始 https://github.com/SudharakaP/JHipsterProtractorDragAndDrop，我在 Jhipster 6.7.0 项目中实现了@angular/cdk/drag-drop。

我使用了 jHipster 标准生成器，然后使用 npm install @angular/cdk@8.2.3 添加了 cdk 库（最后一个模块 9.0.1 不适用于 @angular/core 8.2.14）

在您的模块中导入 DragDropModule：

import { DragDropModule } from '@angular/cdk/drag-drop'; imports: [ DragDropModule ]

然后您可以使用官方文档中说明的 DragDrop 指令： https://material.angular.io/cdk/drag-drop/overview

Drag/drop JHipster 中重新排序的列表：推荐什么？

Drag/drop reordered lists in JHipster: What's recommended?

drag-and-drop

jhipster

angular