Как реализовать перетаскивание с помощью angular 2 (v2.0.0-beta.15)

Я хочу реализовать простой список перетаскивания n в angular, например список продуктов, в котором я могу изменить его порядок.

Iv реализовал его перед использованием https://github.com/akserg/ng2-dnd, но моя проблема в том, что я использую angular 2.0.0-beta.15, и я не могу сейчас обновлять поэтому мне нужно найти что-то, что поддерживает эту версию. Iv пытался найти конкретные коммиты этой библиотеки и ничего, что подходит мне. Мне нужно это точное поведение. более конкретный пример этой библиотеки -. Может быть, кто-то знает, что я могу сделать это сам, даже в любом случае будет хорошо, предпочитайте библиотеку, чтобы сэкономить время.

(im используя typescript)

если есть кто-то, у кого есть другое решение по-другому для переупорядочения списка и может привести пример, который также будет благословлен.

Ответ 1

Хорошо, так что в первую очередь спасибо людям, которые ответили.

Ответ, который помог мне больше всего в том, как исправить проблему, с которой я столкнулся с ng2-dnd:

Я просто добавил в devDependencies:

"ng2-dnd" : "1.5.0"

запустите npm install, и я был готов пойти и использовать библиотеку, как в примерах github.

Ответ 2

Существует два наиболее распространенных способа разрешить перетаскивание с помощью Angular 2. Сначала используйте одну из открытых библиотек с открытым исходным кодом Angular (их несколько); а во-вторых, используется библиотека jQuery UI для перетаскивания. После некоторого расследования я обнаружил, что большинство из них сделаны для Angular 1.x и по-прежнему не поддерживают все необходимые мне функции.

Итак, я решил сделать свою реализацию перетаскивания с помощью jQuery, используя его библиотеки TypeScript.

Чтобы поддерживать перетаскивание, начинайте с получения jQuery файлов JavaScript в моем проекте и index.html. После получения файлов jQuery перед использованием в проекте Angular + TypeScript для этого требуются jquery.d.ts и jqueryui.d.ts, которые дадут специфическую реализацию типа для перетаскивания.

Шаг 1

Выполните следующие команды в корневом каталоге проекта:

// install tsd
npm install tsd -g
// install jquery.d.ts
tsd install jquery --save
// install jqueryui.d.ts
tds install jqueryui --save

Выше команды установят специфическое для типа jQuery сопоставление типов в папку ввода проекта, как показано здесь.

Шаг 2

Перетаскивание имеет два аспекта для реализации:

некоторый контейнер, который позволяет отбрасывать компонент внутри контейнера droppable
которому будет разрешено перетаскивать перетаскиваемый компонент

В моей реализации квадрат доски можно отбрасывать, когда куски можно отбросить, а куски можно перетаскивать, которые можно перетащить между двумя квадратами. Чтобы поддержать это, создайте существующий квадрат (html-шаблон), добавьте CSS-класс droppable-square, который будет использоваться позже, чтобы сделать квадратный droppable. И добавьте CSS class draggable-piece, чтобы сделать игру из шахматной фигуры.

<div *ngFor="let files of Board.Files, let i = index">
  <div class="board-square droppable-square" *ngFor="let rank of Board.Ranks, let j = index" [style.background]="Board.Squares[7-i][j].IsWhite ? '#FECE9E': 'D18B46'">
    <span class="square-name">{{Board.Squares[7-i][j].SquareId}}</span>
    <div *ngIf="Board.Squares[7-i][j].Piece" class="piece draggable-piece"></div>
  </div>
</div>

Шаг 3

Для реализации draggable и droppable создан новый класс с именем PieceMover, который имеет логику, чтобы сделать куски подвижными. Как показано в следующей кодовой базе, он делает выше классы CSS перетаскиваемыми и droppable, и помещает ограничения только на то, что кусок можно отбросить на квадрат, а не за пределы квадрата. Существует немного дополнительной логики для отображения границы в процессе перетаскивания, на котором фигуры наводятся.

Инъекция зависимостей - Angular 2

Injection Dependency является одной из наиболее ценных функций Angular 2. Как и любые языки разработки на стороне сервера, такие как С#, Java позволяет иметь контейнер IoC для поддержки Injection Dependency, аналогично Angular 2 разрешает DI. Injection Dependency позволяет развязывать зависимости между классами и поддерживать модульное развитие. Как видно в коде класса PieceMover над классом, украшен @Injectable(), который указывает на контейнер DI Angular 2, который может быть введен в этот класс. Также обратите внимание на импорт Injectable в первой строке кода класса PieceMover.

Потребительский класс BoardComponent в этом случае использует массив "поставщиков" для конкретных зависимостей, которые должны быть разрешены контейнером Angular 2 DI. Конструктор принимает параметр типа PieceMover, который будет инжектирован/разрешен DI. После разрешения зависимостей, упомянутых выше, после отображения платы BoardComponent вызывается метод метода MakePiecesMovable(), который заставляет фигуры перемещаться на шахматные квадраты.

UPD. Если вы не соглашаетесь с пользовательской реализацией, вы можете использовать некоторые библиотеки из этого списка:

Ответ 3

Вы можете использовать конкретную ревизию от Dragula 2 Github repo.

1 - откройте package.json и прокрутите до "dependencies"

2 - отредактируйте пакет ng2-dragula на ссылку Github с последним фиксацией до того, как они перейдут на RC.1.

"ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007"

3 - Удалите папку ng2-dragula в node_modules и переустановите ее из package.json с помощью

npm install