时间戳

首页 > 解决方案 > 如何在 Angular 2+ 中进行图像库拖动和排序？

angular - 如何在 Angular 2+ 中进行图像库拖动和排序？

问题描述

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

我尝试使用 jQueryUi 可排序，但它显示错误：TypeError: $(...).sortable is not a function

任何想法在角度 2-6 中做到这一点？

标签： angularjquery-ui-sortable

解决方案

在一些用户建议（我再也找不到的答案）下，我尝试了 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;
    }
}

}

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

推荐阅读