Drag and Drop с сортировкой можно в Angular Material?

Сценарий:

  • Начиная с Angular Material cdk версии 7.0.3, у нас есть сортировка Drag & Drop.
    В этом перетаскивании везде в этом div мы можем щелкнуть и перетащить.

  • Если не щелкать везде, будет доступен только значок и перетащите весь этот div.

  • Теперь в примере ниже вы можете щелкнуть и перетащить этот div везде, где я этого не хочу. Я хочу только щелкнуть значок и перетащить этот div с сортировкой.

Пример: https://stackblitz.com/edit/angular-by5l4g

URL приложения: https://angular-by5l4g.stackblitz.io

Перетаскивание и сортировка


angular angular-material angular-cdk angular-material-6 angular-dragdrop
person Sahin    schedule 13.11.2018    source источник
comment
пожалуйста, проясните вопрос примером и, если возможно, создайте демонстрацию stackblitz.   -  person Abhishek Kumar    schedule 13.11.2018
comment
Пожалуйста, объясните - Drag&Drop handle with sorting, что вы на самом деле хотите сделать с этим отлично работающим примером перетаскивания, если возможно, приведите пример.   -  person Abhishek Kumar    schedule 14.11.2018
comment
это пример stackblitz - stackblitz.com/edit/angular-acz158. В этом примере div будет перетаскиваться и сортироваться на основе щелчка и перетаскивания везде в этом div. но я хочу, чтобы без щелчка везде можно было щелкнуть только значок и перетащить этот div. Надеюсь, теперь ты понимаешь.   -  person Sahin    schedule 14.11.2018
comment
div можно перетаскивать только здесь и занимает позицию, в которой он упал. Где требуется сортировка и сортировка может изменить порядок перетаскиваемых элементов? Если да, то какой толк в перетаскивании в любое место списка.   -  person Abhishek Kumar    schedule 14.11.2018
comment
то, что я хочу, без щелчка везде, будет доступен только значок и перетащите весь этот div. теперь в этом примере вы можете щелкнуть и перетащить этот div везде, где я этого не хочу.   -  person Sahin    schedule 14.11.2018
comment
хорошо, поэтому вы хотите, чтобы перетаскивание выполнялось только через этот значок, а не через весь div., и если это то, что вы хотите, вы можете добиться этого, используя cdkDragHandle в качестве <i cdkDragHandle class="material-icons">reorder</i>   -  person Abhishek Kumar    schedule 14.11.2018
comment
это не работает, потому что, если мы используем cdkDragHandle, может быть, сортировка не работает, верно? Вы можете проверить пример сейчас.   -  person Sahin    schedule 14.11.2018
comment
Я использовал это, и я могу перетаскивать элементы только из этого значка, и работает так же, как если бы он работал с перетаскиванием куда угодно из всего div. Я думаю, что это хорошо использовать для перетаскивания только из значка. Теперь весь div можно перетаскивать только через значок, если мы используем dragHandle.   -  person Abhishek Kumar    schedule 14.11.2018
comment
Вы можете поделиться этими кодами? Я надеюсь, за исключением того, что значки в другой области не доступны для нажатия.   -  person Sahin    schedule 14.11.2018
comment
См .: stackblitz.com/edit/angular-ly7e63? file = src / app /, в этот тег добавлено только cdkDragHandle в тег <i>, просмотрите и предложите проблемы.   -  person Abhishek Kumar    schedule 14.11.2018
comment
Итак, хотите ли вы также установить флажок, и если флажок установлен, то только этот div можно перетащить из значка, и его можно удалить в любом месте списка ??, перетаскивать из значка, только если его флажок установлен?   -  person Abhishek Kumar    schedule 14.11.2018
comment
хм, конечно, он отлично работает для меня, спасибо .. но только один думает, что перетащите курсор, мы должны удалить этот курсор в другой области   -  person Sahin    schedule 14.11.2018
comment
готово, см. stackblitz.com/edit/angular -7wyuyg? File = src / app /, так что могу я вставить это в раздел ответов, чтобы другие пользователи, находящие ответы, знали, что это необходимый ответ.   -  person Abhishek Kumar    schedule 14.11.2018
comment
да, этот флажок тоже работает. если только проверить, можно перетаскивать div. а если есть добавление и удаление, то это завершено.   -  person Sahin    schedule 14.11.2018

Ответы (1)


arrow_upward
3
arrow_downward

Демо с перетаскиванием только div из значка

Код приложения: https://stackblitz.com/edit/angular-drag-and-drop-example?file=src/app/app.component.ts

Подход:

  • Измените <i class="material-icons">reorder</i> на
    <i class="material-icons" cdkDragHandle >reorder</i>
  • Использовал cdkDragHandle, чтобы сделать этот значок перетаскиваемым, удалил cursor: move из div и применил его к тегу <i>.


Обновление 1 (согласно вопросу о флажке):

  • другой аналогичный тег <i> сохраняется как маска, которая не разрешает запуск перетаскивания, если флажок не установлен, и при проверке флажка мы разрешаем этой маске уходить, так что div можно перетаскивать из основного тега <i>.

Обновление 2 (согласно удалению и добавлению вопроса):

  • добавлены функции удаления и добавления.
person Abhishek Kumar    schedule 14.11.2018
comment
Я обновляю этот ответ с проблемой флажка через некоторое время. - person Abhishek Kumar; 14.11.2018
comment
@Sahin, пожалуйста, просмотрите обновленные ссылки для ответов, его теперь перетаскивают элементы, чей флажок установлен, это должно быть реализовано с помощью фильмов в виде массива объектов, см. Код для правильного понимания. И если это будет полезно, проголосуйте за ответ или предложите изменения, если таковые имеются. - person Abhishek Kumar; 14.11.2018
comment
Abhishek, это хорошая работа. тогда остальные добавляются и удаляются ах строкой. - person Sahin; 14.11.2018
comment
@Sahin его кода достаточно, чтобы двигаться дальше, так что остальное вы можете сделать с помощью этого кода. Заданный вопрос заключался в том, чтобы сделать перетаскивание из значка, и если флажок установлен, теперь все готово. Пожалуйста, рассмотрите возможность выполнения остальных требований, и мы будем благодарны за голосование. - person Abhishek Kumar; 14.11.2018
comment
@Sahin, пожалуйста, просмотрите обновленные ссылки, чтобы увидеть функциональность add and delete, я надеюсь, что теперь она отвечает всем требованиям. - person Abhishek Kumar; 14.11.2018
comment
@Sahin рад, что это сработало, и рад помочь здесь. Пожалуйста, проголосуйте также за этот ответ. Спасибо. - person Abhishek Kumar; 14.11.2018
comment
За ответы получают другие люди, которые ищут похожие похожие ответы. См .: meta.stackexchange.com/questions/139/ - person Abhishek Kumar; 14.11.2018