Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Drag Drop Sortable, mixed orientation support

See original GitHub issue

Feature request,

Mixed direction support, such as items placed by flex-wrap: wrap

What is the expected behavior?

Should be able to use sortable drag drop on both vertical and horizontal axis at the same time

What is the current behavior?

Only vertical or horizontal is supported

What are the steps to reproduce?

https://stackblitz.com/github/vbwioxyq

Github repo link

https://github.com/abdulkareemnalband/ng-drag-drop/tree/prebuilt-css

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.0.0-beta.4
Node: 8.11.4
OS: win32 x64
Angular: 7.0.0-rc.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.9.0-beta.4
@angular-devkit/build-angular     0.9.0-beta.4
@angular-devkit/build-optimizer   0.9.0-beta.4
@angular-devkit/build-webpack     0.9.0-beta.4
@angular-devkit/core              7.0.0-beta.4
@angular-devkit/schematics        7.0.0-beta.4
@angular/cdk                      7.0.0-beta.2
@angular/cli                      7.0.0-beta.4
@angular/flex-layout              6.0.0-beta.16
@angular/material                 7.0.0-beta.2
@ngtools/webpack                  7.0.0-beta.4
@schematics/angular               7.0.0-beta.4
@schematics/update                0.9.0-beta.4
rxjs                              6.3.3
typescript                        3.1.1
webpack                           4.19.1

Issue Analytics

State:
Created 5 years ago
Reactions:300
Comments:209 (7 by maintainers)

Top GitHub Comments

79reactions

c3rbercommented, Dec 13, 2018

here is a workaround with using multiple lists https://stackblitz.com/edit/angular-nuiviw

53reactions

100cmcommented, Oct 22, 2018

@jelbourn hey ,have any progress about this issue now?

Top Results From Across the Web

Angular CDK: Sorting Items using Drag & Drop - This Dot Labs

In this blog post, we'll see a practical example to allow sorting Items using Drag and Drop considering a single and a mixed-orientation...

How to provide mixed orientation to Angular Material drag e ...

I am using Material drag e drop they don't allow the mixed-orientation of the drag e drop so to use it with both...

Angular Drag N Drop Mixed Orientation Example (forked)

Angular Drag N Drop Mixed Orientation Example (forked). Starter project for Angular apps that exports to the Angular CLI. gregor-doroschenko.

Drag Drop Sortable, mixed orientation support - Bountysource

Drag Drop Sortable, mixed orientation support.

Drag and Drop | Angular Material

The cdkDropList directive assumes that lists are vertical by default. This can be changed by setting the orientation property to `"horizontal". Drag&Drop ...