Как сделать перетаскивание галереи изображений в Angular 2+? - PullRequest
Новая
       45

Как сделать перетаскивание галереи изображений в Angular 2+?

0 голосов
/ 07 июня 2018

У меня есть галерея изображений, и мне нужно позволить пользователю упорядочить их, что-то вроде https://jqueryui.com/sortable/#display-grid

Я пытался использовать сортируемую jQueryUi, но она показывает ошибку: TypeError: $ (...) .sortable не является функцией

Любая идея сделать это в угловых 2-6?

1 Ответ

0 голосов
/ 10 июня 2018

Когда какой-то пользователь предложил (ответ, который я больше не могу найти), я пробовал angular-sortablejs.Результатом (на данный момент) является сортируемая галерея изображений, подобная этой: enter image description here

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

}

Часть, которая отправляет заказ на сервер, я еще не закончил его.

...