kutlugsahin / ngx-smooth-dnd Goto Github PK

This is probably me doing something wrong but I can't figure how to properly do this. I just want to remove an item from the array which I assumed was as simple as

disableItem(item: any) {
    item.isEnabled = false;
    const index = this.enabledItems.indexOf(item);
    this.enabledItems.splice(index, 1);
  }

Unfortunately this seems to bug the ordering when dropping the FIRST element, it returns to normal after that. Below is a picture illustrating the behaviour.

Here is a very small stackblitz where you can reproduce the problem: https://stackblitz.com/edit/angular-exjr9b

Repro steps:

• Click on the X button for Obj 2, 3 and 4 from the right group

• Drag Obj2 from the left group into the right group, don't release/drop yet

• Drag Obj2 up and down the right list to reproduce a weird behaviour.

• Drop Obj 2 anywhere on the right list

• Drag Obj 3 and try to reproduce the same behaviour. It appears to be okay

This is probably something extremely simple that I'm just missing out. If you could point out the solution I'd appreciate it.

Hi, I would like to tell you that you did a great work! The most awesome thing is animations.
But there's one problem/issue with license. I have not found any seperate license file nor license setting in your package.json file.
So it would be nice to add it, so that people know how they are permitted to use it, and any restrictions you're placing on it.
Thanks for considering my request.

Hi @kutlugsahin & @Ne4istb . Could you help me, please? Before, I used method, applyDrag(this.items, dropResult); for right sort items, but now, I see next: Cannot find name 'applyDrag'. What I must be doing now for the right sort ?!

Hi,

First:

Thanks for a great tool!

Now, I'm trying to build a horizontal layout with groups where you can drop in between groups.
I'm not sure on how to make the group container expand when being hovered with an item.

If I use vertical, the height is altered, but not when it's horizontal.

Please see this simple, not fully working, example. It shows the flaw.
https://stackblitz.com/edit/angular-mqyve9

It's probably something I've missed but would be happy for some guidance.

Thanks,

There is an issue in smooth-dnd.js: kutlugsahin/smooth-dnd#57 that involves our usage in this library. Can you update the dependency on smootg-dnd.js once this fix is resolved?

Thank you

Versions

* @angular/core: 6.0.3
* ngx-smooth-dnd: 0.2.0

Issue

Hello, it's not described in the doc, but I suppose I have to import the NgxSmootDnDModule like in the demo app. But importing this module causes an error.

Repro steps

Stackblitz: https://stackblitz.com/edit/angular-gitter-6kntcb?file=app/app.module.ts

or

• Create a new app with angular-cli
• Install ngx-smooth-dnd
• Import the NgxSmoothModule in the app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxSmoothDnDModule } from 'ngx-smooth-dnd';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxSmoothDnDModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Observed behavior

The console display this error message and the app does not work:

ngx-smooth-dnd.js:26 Uncaught TypeError: Cannot read property 'reactDropHandler' of undefined
at Object../node_modules/ngx-smooth-dnd/esm5/ngx-smooth-dnd.js (ngx-smooth-dnd.js:26)

Can you update the dependencies to the new release of Angular, so we stop getting warnings like:

warning " > [email protected]" has incorrect peer dependency "@angular/common@^5.1.0". warning " > [email protected]" has incorrect peer dependency "@angular/core@^5.1.0".

Hi. I'm using blocks with shadows inside smooth-dnd-draggable and shadows get cutted by "overflow: hidden" on smooth-dnd-draggable-wrapper. I don't see any reason to have this "overflow: hidden" style and overrided it inside project. But could you explain why this style has been added and possibly to remove it if not needed.

I am using ionic 4 with split-pane, to split menu and page, but when dragging is a margin of the column for the card of about 150px and I can not set getGhostParent, have any examples of implementation?

Hi
Thanks for your wonderful job.
This is a missing feature that I'm trying hack in, but it seem a little bit too much because I have hack both the Angular version and the original library.

The issue is when you drag and move the mouse outside of the browser window, the elements end in a weird unfinished situation.

I'm trying to fix it by applying this code :

this.renderer.listen('document', 'mouseout', e => {
      const from = e.relatedTarget || e.toElement;
      if (!from || from.nodeName === 'HTML') {
        console.log('**** outside');
      }
      return true;
    });

This is the angular code, but it's easy to understand what's going on.

Thanks so much

Your lib is so awesome but i got a little trouble when i installed

npm i ngx-smooth-dnd

System saved "ngx-smooth-dnd": "^0.2.0" in my package.json file. It's quite old and cards page couldn't work well as it in demo page.
After that, I downloaded your demo and imported from the lib folder in demo. Now everything seems to be OK.
Moreover, I must copy css from your style.css file manually

I just want to notice if you don't know that because i believe that lib can be used more popular if you have time to take care it.

Thank you so much.

How to drag and drop multiple items? @kutlugsahin

I am trying to use this in a project but it breaks my build. Can you kindly look at the following error:

[!] Error: 'constants' is not exported by node_modules/ngx-smooth-dnd/node_modules/smooth-dnd/dist/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules/ngx-smooth-dnd/esm5/ngx-smooth-dnd.js (2:20)
1: import { Component, ViewChild, ContentChildren, Input, Output, EventEmitter, NgZone, NgModule } from '';
2: import SmoothDnD, { constants, dropHandlers } from 'smooth-dnd';
^
3: import { CommonModule } from '';
4: var DraggableComponent = (function () {

If we try to use this module inside boostrap modal - draggable not positioning in correct place when we drag it.

Example:

I'm encountering below error with version 0.2.6. Please help
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Following your examples I tried adding a grabbing cursor to the ghost item, but with no luck:

.card-ghost {
	transition: transform 0.5s ease;
	transform: rotateZ(5deg);
	opacity: 0.75;
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

Any idea how that can be achieved?

I am using this package into angular project. I found one error that mention below. After this error occur my DnD not working. can't drag and nothing happen. I don't know why this error raised and how to solve.

When I drag one item from lot's of item list (20 items), then automatically this error occur.
When I click on source from where it generate it will move me into vendor js file look like this :

Hello,

I need to create a a drop zone for my dnd files, i.e. files from a table list are dragged into a separate drop zone, similar to https://www.dropzonejs.com/. Table list is also smooth-dnd-contaner with smooth-dnd-draggable items.

I got some results with dragEnter/dragLeave functions, but the problem is that dnd-container expects a list of dragables inside abnd dragEnter works only if I drag an item at the very top of container. I just want to have an empty container that will fire onDrop when smooth-dnd-draggable is droped in.

Is there a way to mimic this behavior with smooth-dnd?

Cheers Alex

Hello,

While compiling I've a error:

Error: Failed to compile entry-point ngx-smooth-dnd (es2015 as esm2015) due to compilation errors:
node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of NgxSmoothDnDModule, but could not be resolved to an NgModule class.

Any suggestions ?

When you drop a card while it is moving towards the x-axis, the scroll locks in your direction and cannot return causing you to refresh the page again.
What can be done?
My suggestion is an event so we can control the scroll.

I have followed all the necessary steps and it compiles successfully. But in the browser it shows as follows

Uncaught Error: Template parse errors:
'smooth-dnd-draggable' is not a known element:
1. If 'smooth-dnd-draggable' is an Angular component, then verify that it is part of this module.
2. If 'smooth-dnd-draggable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("v class="simple-page">
        <smooth-dnd-container (drop)="onDrop($event)">            
          [ERROR ->]<smooth-dnd-draggable *ngFor="let item of items">
            <div class="draggable-item">
          "): ng:///AppModule/AppComponent.html@4:10
'smooth-dnd-container' is not a known element:
1. If 'smooth-dnd-container' is an Angular component, then verify that it is part of this module.
2. If 'smooth-dnd-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <div>
      <div class="simple-page">
        [ERROR ->]<smooth-dnd-container (drop)="onDrop($event)">            
          <smooth-dnd-draggable *ngFor="le"): ng:///AppModule/AppComponent.html@3:8
    at syntaxError (compiler.js:1021)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14830)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
    at compiler.js:23948
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
    at compiler.js:23858
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)

What should i do to fix this issue?

In vertical orientation, when we try to drag the card from right to left and top to bottom is not working but when I drag from left to right and bottom to top it's working.

When using angular cli version 6.0.5 with a lazy loading route I get following error

Uncaught (in promise): ReferenceError: SmoothDnD is not defined

If i set --build-optimizer=false on ng-cli I don't get that error.

I used angular-cli to introduce ngx-smooth-dnd, and on the "Card board" page, on Google, when I dragged down the first item of "Ipsum", the first item would not stay where I wanted to stop, but in the last item of "Ipsum". And the problem did not appear on IE and Firefox. Please tell me what caused this. Thank you!

Google:

IE:

Do we have any other option or provision so provide restriction movement within an element?

This is how i am using it in my code.
<smooth-dnd-container [groupName]="'draggableItems'" [autoScrollEnabled]="false" (drop)="onDrop('items', $event)">

Can anyone help me if i am not using it properly....
Thanks

no work in angular

Hi.
When using a sub component that is wrapping smooth-dnd-draggable the drop event is not triggered.
But, if you put smooth-dnd-draggable directly under smooth-dnd-container it is working.
So, the bellow app-draggable will not trigger the onDrop inside id.

Is this as designed?
Thanks

    <smooth-dnd-container  [groupName]='1' (dragStart)="log('drag start', $event)" [orientation]="'horizontal'"  (drop)="onDrop($event,'1')">
         <smooth-dnd-draggable><div id="sadf">THIS IS WORKING</div></smooth-dnd-draggable>
        <app-draggable >THIS WILL NOT WORK</app-draggable> 
      </smooth-dnd-container>

Hi. Thnx for this wonderful library. Can you help me, I use smooth-dnd-container with [lockAxis]="'x'" [orientation]="'horizontal'", when I start dragging element, this element has a position, top: 200px, but I expected behaviour like this: https://stackblitz.com/edit/angular-gshjfj?file=app/cdk-drag-drop-axis-lock-example.html

SCRIPT5022: Exception thrown and not caught
File: polyfills.bundle.js, Line: 804, Column: 36

Hi,
Is it working for Angularjs. I am pretty new for angular and want use drag and drop functionality in my project.
If it is working. Can you tell me how can i use it?

Thanks and Regards
Tanuja

no work in angular

Hello, i found some bug, when i scale screen and start draging item his position is wrong. Item display not the same position where i touch. Reproduced only on iOS devices, on Android devices work correctly.

Sorry but i can't attach screenshot or video.

Hi,
I have setup a project here: https://stackblitz.com/edit/angular-e2r3b7?file=src%2Fapp%2Fapp.component.ts

For some reason, when I drag around the cards, it is not placed where I dropped it, it goes to the bottom of the card list , can you tell whats wrong?

Thanks

Versions

* @angular/core: 6.0.2
* ngx-smooth-dnd: 0.2.0
* smooth-dnd: 0.5.4

Observed behavior

No animation for the not dragged item, and the new position of dropped item is sometimes totally wrong.

Repro steps

Stackblitz: https://stackblitz.com/edit/angular-gitter-hlbdjt

Mention any other details that might be useful

I tried to import BrowserAnimationModule and install @angular/animations because I know they are requires for some libraries like angular/material, but it didn't fix the problem.

Could it be related to my last issue or maybe I'm just missing something?

Not sure if I am doing something wrong, can someone please confirm?

I consumed this library as per API: [dragPlaceholder]="{className: 'class-name'}" but it does not show up.
If I use a truthy value e.g. [dropPlaceholder]="true" then the default placeholder shows up correctly.

Minimum reproduction:
https://stackblitz.com/edit/angular-ivy-8qcthl

When I'm specifying "class" attribute in smooth-dnd-draggable item, this class get replaced by DraggableComponent::ngAfterViewInit() method. I propose to use parentNode.classList.add(constants.wrapperClass)
Also you can inject ElementRef and get reference to current element directly, not from wrapper...
constructor(private elRef: ElementRef){}
ngAfterViewInit() { this.elRef.nativeElement.classList.add(constants.wrapperClass) }

or even better
constructor(private elRef: ElementRef, private renderer: Renderer2){}
ngAfterViewInit() { this.renderer.addClass(this.elRef.nativeElement, constants.wrapperClass); }

Hey, first I want to say thank you so much for creating this awesome project! We're just running into one issue. It seems like the tool is unable to handle dynamically created components. Thoughts on this?

Here's a Stackblitz of the issue

I'm using angular5 and ngx-datatable 11.3.2 How it would be possible to integrate your library within this table to allow to drag columns (headers) with nice animations like in ngx-smooth-dnd?

Current behavior
Hi, I have used this package in my angular-6 project.
I am getting this error when I drag and drop items little fast.

**NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.**

Expected behavior
I just don't want this error, please help me to solve this bug.

• ngx-smooth-dnd version: ^0.2.6

• Angular version: ^6.0.0

• Browser: [all | Chrome | Firefox | IE | Safari | Opera]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

I'm having difficulty configuring this plugin to reordering rows in a regular html table. I tried:

<table>
  <tbody>
    <smooth-dnd-container>
      <smooth-dnd-draggable>
        <tr><td>something</td><tr>
      </smooth-dnd-draggable>
    <smooth-dnd-container>
  </tbody>
</table>

The problem is that this generates html like the following:

<table>
  <tbody>
    <smooth-dnd-container>
      <div class="smooth-dnd-container vertical">
        <smooth-dnd-draggable>
          <tbody> <!-- this is the problem -->
            <tr><td>something</td><tr>
          <tbody>
        </smooth-dnd-draggable>
      </div>
    </smooth-dnd-container>
  </tbody>
</table>

You can see we generate an extra tbody, which I think is injected by the browser (https://stackoverflow.com/questions/7490364/why-do-browsers-still-inject-tbody-in-html5). Regardless, having the additional tbody causes problems with styling and other functionality. Is there anyway to leverage this library with standard html tables like above?

Hello, i found some bug when drag item. Test on demo page.

And in html i have this:

Hello mate, at first i want to tell you that you did a great work!
I have a little problem with smooth-dnd-container. I would like to put his own style without parent div that style it. I say this because my container is not translating on orientation vertical good, i dont know if this is cause i'm using Angular material and styles from your library and AM has conflict.

asdf item is dragging but mouse doesnt show it and qwer item doesnt go top