如何在Angular 2+中对图片库进行拖动和排序？

Question

我有一个图片库，我需要让用户来排列它们，类似于https://jqueryui.com/sortable/#display-grid

我尝试使用jQueryUi排序，但它显示错误: TypeError：$(...).sortable不是一个函数

有没有在angular 2-6中这样做的想法？

Answer 1

在一些用户的建议下(一个我再也找不到的答案)，我尝试了angular-sortablejs。结果(目前)是一个可排序的图片库，如下所示：

​

npm -i角度-排序npm-保存

app.module.ts

import {SortablejsModule} from 'angular-sortablejs' @NgModule({ imports:[ SortablejsModule.forRoot({ animation: 150 })

mycomponent.component.ts import {SortablejsModule} from 'angular-sortablejs';

mycomponent.component.html

<div class="row postgallery"> <div class="col-md-12 col-lg-12"> <div id="multi" style="margin-left: 30px" [sortablejs]="images" [sortablejsOptions]="{ animation: 150 }"> <div *ngFor="let item of images" class="imagecontainer"> <div class="controls"><a href="#"><i class="fa fa-trash text-danger"></i></a></div> <img src="{{item}}"></div> </div> </div> </div>

mycomponent.component.scss

.postgallery{
img{
    max-height: 200px; max-width: 250px;
    margin: 0 13px 14px 0;
    cursor: move;
    border: 1px solid #ddd;
}
.imagecontainer{
    display: inline-block;

    .controls{
        display: block;position: absolute;
    }
}

}

下单给服务器的那部分我还没做完。