如何做一个图像库拖动＆amp;在Angular 2+中排序？

Question

我有一个图片库，我需要让用户安排它们，例如https://jqueryui.com/sortable/#display-grid

我尝试使用jQueryUi sortable，但它显示错误：TypeError：$（...）。sortable不是函数

有任何想法以角度2-6做到这一点吗？

Answer 1

在一些用户建议（我找不到的答案），我尝试过angular-sortablejs。 结果（目前）是一个可排序的图像库，如下所示：

npm -i angular-sortablejs --save

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;
    }
}

}

将订单发送到服务器的部分我还没完成。