在JHipster中拖放重新排序的列表:推荐什么？
寻求一些建议/指导。我想在JHipster 6.7.1中实现一个拖放可重排序列表(我认为这是一个非常标准的特性)。
确切地说，假设您已经创建了一个自定义有序的对象列表。除了从列表中添加/删除项外，用户还希望重新排序列表。例如，想象一下希望将[Epsilon]按顺序排列(在[Alpha]之后)：
(before) (after)
[Alpha] [Alpha]
[Beta] \---+ [Epsilon]
[Gamma] | [Beta]
[Delta] | [Gamma]
[Epsilon]--+ [Delta]只需将[Epsilon]拖放到[Alpha]和[Beta]之间的某个位置，并将其删除。根据新的顺序重新排列列表。好了。显然，在后端，代码必须持久化/管理新的索引/排序，但是用户体验是直观和快速的。
拖放可重排序将允许用户快速地将项目拖放到任何所需的顺序中。多年来，我使用简单的JavaScript库多次实现了这种功能。我希望JHipster 6.7.1能帮助迅速找到一个好的现代解决方案。
Ng-自助似乎只提供静态工具。(没有拖放。)
角材料 看上去很完美！！在努力让东西在JHipster里移动，甚至尝试了JHipster角材料发生器之后，我对JHipster不支持(也可能永远)支持角质材料感到惊讶！跟鞋带踩到角质材料的脚趾有关.好的。
然后我尝试使用SortableJS使用ngx-可排序。不走运。
我发现了一些关于PrimeNG作为JHipster开发人员的流行工具集的引用。这些拖放指令集看起来很有用，但是没有一个例子显示一个简单的可重排序列表(从一个列表拖动到另一个列表不是我要说的)。选择列表指令也不是我要找的东西。我会继续和PrimeNG一起玩..。
与此同时，我不是独自一人来鞭打，而是向StackOverflow上的好人寻求一些智慧。
- 是否有人在JHipster应用程序中实现了简单的拖放列表顺序机制？
- 哪些库/方法在JHipster中工作？索塔布莱·you /为你工作吗？PrimeNG？还有别的吗？
- 我注意到一个叫吴-德拉古拉的东西..。有人在JHipster应用程序中尝试过这种方法吗？
- 我应该使用Vue，还是使用其他前端(而不是角度)？这会让我有更大的灵活性吗？
- 我是不是想过头了。而忽略了一些明显的东西？
我真的很想尝试使用JHipster/Angular，但我开发得足够早，可以接受其他的选择。
提前感谢！
开发环境为:Windows10Pro；IntelliJ 2019.3.3；OpenJDK 13；Node12.15.0；NPM6.13.7；Gradle 6.1.1；Chromev80.3987.116
PS:我很高兴提供更多的细节。问问就行了！
回答 2
Stack Overflow用户
发布于 2020-02-21 23:27:30
在玩了PrimeNG之后，我找到了OrderList，它提供了拖放重新排序。它没有角质材料版本那么简单和优雅。在某些方面，它更有雄心，也许是设计得有点过火。有时，更少就是更多，需要做一些工作来“哑”小部件，但到目前为止，它仍然有效。
非常感谢乔晨·格布萨特尔提供到Jhipster/PrimeNG集成指南的链接。就像一种魅力。
之后，我在模块中添加了以下内容：
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属性允许我动态地调整列表窗口的大小，以便所有项目都在视图中。
PrimegNG看起来有一些不错的特性。这不是棱角分明的材料，但正如我的老祖父曾经说过的：“如果你得不到你所爱的人，你就会最爱你能得到的那个人！”
Stack Overflow用户
发布于 2020-02-22 08:26:26
从Sudharaka的演示项目https://github.com/SudharakaP/JHipsterProtractorDragAndDrop开始，我在一个Jhipster 6.7.0项目中实现了@ar角/cdk/拖放。
我使用了jHipster标准生成器，然后用npm install @angular/cdk@8.2.3添加了cdk库(最后一个模块9.0.1不能使用@ar角/核心8.2.14)
在模块中导入DragDropModule：
import { DragDropModule } from '@angular/cdk/drag-drop'; imports: [ DragDropModule ]
然后，您可以使用DragDrop指令，如官方文档中所解释的：https://material.angular.io/cdk/drag-drop/overview
https://stackoverflow.com/questions/60293114
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号