obaidurrehman / ng-drag-drop

Drag & Drop for Angular - based on HTML5 with no external dependencies. :tada:

Hi there 👋

I am Obaid.

• 📫 How to reach me: Twitter, LinkedIn

ng-drag-drop's Issues

Drag Multiple Item

Is there is anyway to drag multiple selected item from one list to another list

dragOverClass assigned to non valid drop targets

If I assign the dragOverClass to a draggable (and droppable) element it gets the class assigned at drag start and short after again removed. The draggable helper has now the dragOverClass style.

drag and drop don't work in fireFox

drag and drop work fine in chrom and ie10 +, but in fireFox Ko

Drag drop not supported in all browsers

Currently I have implemented DnD by importing 'Ng2DragDropModule', its working fine in chrome and mozilla.
But not supported in safari and ms edge browser.
Please guide where we have to change to support all browsers.

Error in ngOnDestroy() method of Droppable directive while doing unit test

Hello,

I'm using your excellent ng2-drag-drop module in an application.
Today I started to create some tests in my Angular 2 app.

I have a panel which is draggable from a left sidebar to the main panel is the center.

But, when it comes to test my component containing droppable div, the command "ng test" try to run the default test "should create" of my component and it stopped with the following errors :

Chrome 59.0.3071 (Windows 10 0.0.0) ChartPanelToolbarComponent should create FAILED
        TypeError: Cannot read property 'unsubscribe' of undefined
            at Droppable.ngOnDestroy (webpack:///~/ng2-drag-drop/src/directives/droppable.directive.js:57:0 <- src/test.ts:110419:35)
            at Wrapper_Droppable.ngOnDestroy (/Ng2DragDropModule/Droppable/wrapper.ngfactory.js:17:16)
            at CompiledTemplate.proxyViewClass.View_GridPanelComponent0.destroyInternal (/GridPanelModule/GridPanelComponent/component.ngfactory.js:185:23)
            at CompiledTemplate.proxyViewClass.AppView.destroy (webpack:///~/@angular/core/src/linker/view.js:203:0 <- src/test.ts:93603:14)
            at CompiledTemplate.proxyViewClass.DebugAppView.destroy (webpack:///~/@angular/core/src/linker/view.js:606:0 <- src/test.ts:94006:38)
            at CompiledTemplate.proxyViewClass.View_AppComponent0.destroyInternal (/DynamicTestModule/AppComponent/component.ngfactory.js:302:20)
            at CompiledTemplate.proxyViewClass.AppView.destroy (webpack:///~/@angular/core/src/linker/view.js:203:0 <- src/test.ts:93603:14)
            at CompiledTemplate.proxyViewClass.DebugAppView.destroy (webpack:///~/@angular/core/src/linker/view.js:606:0 <- src/test.ts:94006:38)
            at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.destroyInternal (/DynamicTestModule/AppComponent/host.ngfactory.js:33:19)
            at CompiledTemplate.proxyViewClass.AppView.destroy (webpack:///~/@angular/core/src/linker/view.js:203:0 <- src/test.ts:93603:14)
            at CompiledTemplate.proxyViewClass.DebugAppView.destroy (webpack:///~/@angular/core/src/linker/view.js:606:0 <- src/test.ts:94006:38)
            at CompiledTemplate.proxyViewClass.AppView.detachAndDestroy (webpack:///~/@angular/core/src/linker/view.js:187:0 <- src/test.ts:93587:14)
            at ComponentRef_.destroy (webpack:///~/@angular/core/src/linker/component_factory.js:147:51 <- src/test.ts:42620:70)
            at ComponentFixture.destroy (webpack:///~/@angular/core/bundles/core-testing.umd.js:263:0 <- src/test.ts:12171:35)
            at webpack:///~/@angular/core/bundles/core-testing.umd.js:728:61 <- src/test.ts:12636:78

When I remove the "droppable" attribute in my div, the test pass.

I'm using Angular CLI 1.0.0-beta.28.3 and ng2-drag-drop 2.0.1

You can reproduce it with the following steps :

npm install -g [email protected]
ng new ng2-drag-drop-test-app
cd ng2-drag-drop-test-app
npm install ng2-drag-drop --save
ng generate module subcomponent
ng generate component subcomponent
ng generate module sidebar
ng generate component sidebar

Then edit some files :

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { SubcomponentModule } from './subcomponent/subcomponent.module';
import { SidebarModule } from './sidebar/sidebar.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    SubcomponentModule,
    SidebarModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

src/app/app.component.html

<app-sidebar></app-sidebar>
<app-subcomponent></app-subcomponent>

src/app/app.component.spec.ts

/* tslint:disable:no-unused-variable */
import { DebugElement, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { SubcomponentModule } from './subcomponent/subcomponent.module';
import { SidebarModule } from './sidebar/sidebar.module';

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        SubcomponentModule,
        SidebarModule
      ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    });
    TestBed.compileComponents();
  });

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

src/app/sidebar/sidebar.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Ng2DragDropModule } from 'ng2-drag-drop';

import { SidebarComponent } from './sidebar.component';

@NgModule({
  imports: [
    CommonModule,
    Ng2DragDropModule
  ],
  exports: [
    SidebarComponent
  ],
  declarations: [SidebarComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SidebarModule { }

src/app/sidebar/sidebar.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
  items = [{name: 'Apple', type: 'fruit'},
          {name: 'Carrot', type: 'vegetable'},
          {name: 'Orange', type: 'fruit'}];

  constructor() { }

  ngOnInit() {
  }

}

src/app/sidebar/sidebar.component.html

<div class="col-sm-3">
    <ul class="list-group">
        <li draggable *ngFor="let item of items" [dragData]="item" class="list-group-item">{{item.name}}</li>
    </ul>
</div>

src/app/sidebar/sidebar.component.spec.ts

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { SidebarComponent } from './sidebar.component';
import { Ng2DragDropModule } from 'ng2-drag-drop';

describe('SidebarComponent', () => {
  let component: SidebarComponent;
  let fixture: ComponentFixture<SidebarComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SidebarComponent ],
      imports: [
        Ng2DragDropModule
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SidebarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

src/app/subcomponent/subcomponent.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Ng2DragDropModule } from 'ng2-drag-drop';

import { SubcomponentComponent } from './subcomponent.component';

@NgModule({
  imports: [
    CommonModule,
    Ng2DragDropModule
  ],
  exports: [
    SubcomponentComponent
  ],
  declarations: [SubcomponentComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SubcomponentModule { }

src/app/subcomponent/subcomponent.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-subcomponent',
  templateUrl: './subcomponent.component.html',
  styleUrls: ['./subcomponent.component.css']
})
export class SubcomponentComponent implements OnInit {
  droppedItems = [];

  constructor() { }

  ngOnInit() {
  }

  onItemDrop(e: any) {
      // Get the dropped data here
      this.droppedItems.push(e.dragData);
  }
}

src/app/subcomponent/subcomponent.component.spec.ts

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { SubcomponentComponent } from './subcomponent.component';
import { Ng2DragDropModule } from 'ng2-drag-drop';

describe('SubcomponentComponent', () => {
  let component: SubcomponentComponent;
  let fixture: ComponentFixture<SubcomponentComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SubcomponentComponent ],
      imports: [
        Ng2DragDropModule
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SubcomponentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

src/app/subcomponent/subcomponent.html.ts

<div class="panel panel-default" droppable (onDrop)="onItemDrop($event)">
  <div class="panel-heading">Drop Items here</div>
  <div class="panel-body">
      <li *ngFor="let item of droppedItems" class="list-group-item">{{item.name}}</li>
  </div>
</div>

Then run ng test and see the errors :)
I have a different error with this test I've created for this posts, but it's still the same about the droppable div.
If i remove "droppable" attribute from the div inside the subcomponent component, then the test passes.

Sorry for the long post, i didn't find the way to do these tests on plunker

Droppable unsubscribed and fails on subsequent calls to page

When I leave and enter a page multiple times, I am getting an object unsubscribed error from the droppable directive. The usage looks like:

`<div class="empty-document-view-item"
droppable
(onDrop)="onItemDrop($event)">
Drag and drop documents here to create summary.

`

The error I am seeing is:

`ERROR Error: Uncaught (in promise): ObjectUnsubscribedError: object unsubscribed
Error: object unsubscribed
at ObjectUnsubscribedError.ZoneAwareError (zone.js:917)
at new ObjectUnsubscribedError (:11000/lib/rxjs/util/ObjectUnsubscribedError.js:19)
at Subject._trySubscribe (:11000/lib/rxjs/Subject.js:94)
at Subject.Observable.subscribe (:11000/lib/rxjs/Observable.js:45)
at Droppable.ngOnInit (:11000/lib/ng2-drag-drop/src/directives/droppable.js:38)
at checkAndUpdateDirectiveInline (:11000/lib/@angular/core/bundles/core.umd.js:10718)
at checkAndUpdateNodeInline (:11000/lib/@angular/core/bundles/core.umd.js:12097)
at checkAndUpdateNode (:11000/lib/@angular/core/bundles/core.umd.js:12065)
at debugCheckAndUpdateNode (:11000/lib/@angular/core/bundles/core.umd.js:12694)
at debugCheckDirectivesFn (:11000/lib/@angular/core/bundles/core.umd.js:12635)
at Object.eval [as updateDirectives] (ng:///HomeComponentModule/DocumentViewerComponent.ngfactory.js:151)
at Object.debugUpdateDirectives [as updateDirectives] (:11000/lib/@angular/core/bundles/core.umd.js:12620)
at checkAndUpdateView (:11000/lib/@angular/core/bundles/core.umd.js:12032)
at callViewAction (:11000/lib/@angular/core/bundles/core.umd.js:12347)
at execComponentViewsAction (:11000/lib/@angular/core/bundles/core.umd.js:12293)
at ObjectUnsubscribedError.ZoneAwareError (zone.js:917)
at new ObjectUnsubscribedError (:11000/lib/rxjs/util/ObjectUnsubscribedError.js:19)
at Subject._trySubscribe (:11000/lib/rxjs/Subject.js:94)
at Subject.Observable.subscribe (:11000/lib/rxjs/Observable.js:45)
at Droppable.ngOnInit (:11000/lib/ng2-drag-drop/src/directives/droppable.js:38)
at checkAndUpdateDirectiveInline (:11000/lib/@angular/core/bundles/core.umd.js:10718)
at checkAndUpdateNodeInline (:11000/lib/@angular/core/bundles/core.umd.js:12097)
at checkAndUpdateNode (:11000/lib/@angular/core/bundles/core.umd.js:12065)
at debugCheckAndUpdateNode (:11000/lib/@angular/core/bundles/core.umd.js:12694)
at debugCheckDirectivesFn (:11000/lib/@angular/core/bundles/core.umd.js:12635)
at Object.eval [as updateDirectives] (ng:///HomeComponentModule/DocumentViewerComponent.ngfactory.js:151)
at Object.debugUpdateDirectives [as updateDirectives] (:11000/lib/@angular/core/bundles/core.umd.js:12620)
at checkAndUpdateView (:11000/lib/@angular/core/bundles/core.umd.js:12032)
at callViewAction (:11000/lib/@angular/core/bundles/core.umd.js:12347)
at execComponentViewsAction (:11000/lib/@angular/core/bundles/core.umd.js:12293)
at resolvePromise (zone.js:712) [angular]
at resolvePromise (zone.js:683) [angular]
at :11000/lib/zone.js/dist/zone.js:760:17 [angular]
at Object.onInvokeTask (:11000/lib/@angular/core/bundles/core.umd.js:4123) [angular]
at ZoneDelegate.invokeTask (zone.js:397) [angular]
at Zone.runTask (zone.js:165) [ => angular]
at drainMicroTaskQueue (zone.js:593) []
at ZoneTask.invoke (zone.js:464) []
at timer (zone.js:1540) []
defaultErrorLogger @ :11000/lib/@angular/core/bundles/core.umd.js:1091
ErrorHandler.handleError @ :11000/lib/@angular/core/bundles/core.umd.js:1151
next @ :11000/lib/@angular/core/bundles/core.umd.js:4761
schedulerFn @ :11000/lib/@angular/core/bundles/core.umd.js:3835
SafeSubscriber.__tryOrUnsub @ :11000/lib/rxjs/Subscriber.js:236
SafeSubscriber.next @ :11000/lib/rxjs/Subscriber.js:185
Subscriber._next @ :11000/lib/rxjs/Subscriber.js:125
Subscriber.next @ :11000/lib/rxjs/Subscriber.js:89
Subject.next @ :11000/lib/rxjs/Subject.js:55
EventEmitter.emit @ :11000/lib/@angular/core/bundles/core.umd.js:3821
NgZone.triggerError @ :11000/lib/@angular/core/bundles/core.umd.js:4192
onHandleError @ :11000/lib/@angular/core/bundles/core.umd.js:4153
ZoneDelegate.handleError @ zone.js:369
Zone.runGuarded @ zone.js:141
_loop_1 @ zone.js:604
drainMicroTaskQueue @ zone.js:613
ZoneTask.invoke @ zone.js:464
timer @ zone.js:1540'

Notice the error Droppable.ngOnInit (:11000/lib/ng2-drag-drop/src/directives/droppable.js:38).

The line is

this.ng2DragDropService.onDragStart.subscribe(function () {

which is unsubscribed when I leave the page the first time. I wasn't sure if I was missing something or not.

Thanks.

Plunker has no items

I'm trying to use your Plunker demo and there are no items populated to drag or drop. I've tried this on multiple browsers (Chrome, Safari) and it doesn't seem that it works on any of them. The code seems to indicate that, for example, the vegetable array exists and is trying to populate into the first draggable field. However, even when I put extra dummy text into the li element, no elements display, seeming to indicate that there is nothing in vegetables.
The display looks like this:

Sortable: Restrict multi list re-order by default

The sortable directive must be single list sortable by default unless configured i.e. Items should be re-orderable with the list only. Right now this is not the default behavior.

Kinda like scopes. Not sure how we should approach this. I am open to ideas.

Error: Template parse errors: 'drag-helper' is not a known element:

Hi all,
I am trying to use ng2-drag-drop in my angular 4 project, I copied the whole folder of drag-help of the demo project to my project and added to my app.component.html, drag-helper.component.ts has selector: 'drag-helper', but after I build and start ng server, in my browser, I got this error:

Error: Template parse errors:
'drag-helper' is not a known element:

1. If 'drag-helper' is an Angular component, then verify that it is part of this module.
2. If 'drag-helper' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Any clue?
Thanks

is it possible to have a singular call that determines scopes when an item is picked up?

Right now I have to bind a lot of dragscopes - it would be much easier if I could pick up the draggable and determine the scope at that point, as it's dynamic and can be costly to compute.

Stop using npm prepublish since its deprecated

Please see this: http://blog.lholmquist.org/npm-prepublish-changes/

How to disable drag (draggable = false or true)

Hello,

I want to set draggable to false or true based on some condition can i be done?

<li draggable *ngFor="let device of lmsDeviceList"
               [dragOverClass]="'drag-over-border-device'"
               [dragData]="device"
               [dragScope]="'zone' "                              
               > 

Demo is using angular2.4.0, not angular4.0.0

I am new to Angular, the ng2-drag-drop is using angular 4.0.0, but the demo is using angular 2.4.0, would you please upgrade the demo to angular 4.0.0?

Also another newbie question, after I build the ng2-drag-drop, how do I use it in a separate angular project? like in java, I can build something into a jar file, then I can drop the jar file to a separate project and import it there, how does it work for ng2-drag-drop? what file is generated for me to import from a separate project?

Thanks

Is there any plan to support multiple items to drag at same time.

Hello Obaid,

Is there any plan to implement the multiple select for drag item.

Angular 1.x

Hi, awesome directives! Any chances this is available to Angular 1.x versions too?

I'm a total noob in Angular 2, don't even know if there is something that restricts that, or if its easy like rendering typescript to javascript, then making some basic changes.

Thanks

Error: Uncaught (in promise): Error: No provider for Ng2DragDropService!

I am using ng2-drag-drop package in my angular 4 app, i have deployed to staging, the package works fine, but yesterday i deployed it live and started getting the error:
Error: Uncaught (in promise): Error: No provider for Ng2DragDropService!

can you please help me to get out of this ASAP
Thanks,
Looking Forward

Droppable not working between different components.

Is it possible to drag and drop items from different components? I'am able to fire off an OnDragStart event. But when I drop the item into the droppable area it doesn't fire off the onDrop event.

Example: I'm trying this in the ng2-Admin project where my items that are draggable are in the blue dashboard area and my droppable area is the black sidebar to the left. If I take an item from the dashboard I get the onDragStart event, but when I drop it onto the left sidebar, the onDrop event doesn't fire.

dragImage - what if I have a spritesheet?

In my case, I use a big spritesheet of images for my drag and drop items. You can move them from one grid to another. If I drag/drop them, the resulting placeholder image is the WHOLE spritesheet - is it possible to make it just the current image (or maybe copy the div that it's in and use that to drag)?

Error compiling with angular version 4

I'm getting this error after importing the module:

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule

Using angular4.0.0 with angular cli 1.0.0

Make scope an array of string

dropScope for droppable directive is a string.
can you make it an array for strings so that droppable directive can accept more than 1 type of items?

Drag and drop from parent app to child app in iframe

We are not able to get drag and drop to work from parent app to child app in iframe. Is this supported?

Best Regards,
Vishal

Items are not visible properly while dragging in certain resolutions

Items which I'm dragging are not visible properly in big screens. Even I noticed the same problem in your plunker example.

In your plunker I did below steps

Step 1: Click launch the preview in a separate window
--> full screen window will open

Step2: Now drag an item from the list and notice dragged item is not visible properly.

Even I'm facing the same issue in my current project also where I implemented ng2-drag-drop.

Thanks
Pratap A.K

Compilation Error in AOT build.

Drag and Drop run and work correctly with JIT compilation But Its through following error in AOT compilation.

Error: Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'Ng2DragDropModule'. Consider exporting the symbol (position 21:14 in the original .ts file), resolving symbol Ng2DragDropModule in /home/shamim/Boi2/boibazar/node_modules/ng2-drag-drop/src/ng2-drag-drop.module.d.ts, resolving symbol Ng2DragDropModule in /home/shamim/Boi2/boibazar/node_modules/ng2-drag-drop/index.d.ts, resolving symbol PublicPageModule in /home/shamim/Boi2/boibazar/src/app/pages/public-page/public-page.module.ts, resolving symbol PublicPageModule in /home/shamim/Boi2/boibazar/src/app/pages/public-page/public-page.module.ts

OS: Ubuntu 16.04,
Node version : 6.9.5,
NPM: 3.10.10.
Angular version: 2.4.7

Highlight valid drop targets

It would be nice if we can assign a class to all valid drop targets if drag is started. It brings more usability to the user.

drag and drop in multiple component

I have two component for example
one.ts
tasks[]
tasks ={"A","B"}
two.ts
tasks[]
when I drop one element i.e A from one.ts to two.ts it should remove from one.ts and vice versa.

It does not work with SVG

The drag and drop doesn't work properly if you drop in a svg. Sometimes you can drop, but mostly not.

Add Universal support

Version: 2.6.0
Angular 4.3.5
AngularCli: 1.4.0-rc.1

When running on universal I get the following error

ERROR TypeError: this.el.nativeElement.querySelector is not a function
    at Draggable.getDragHandleElement (C:\dev\git_clones\app\node_modules\ng2-drag-drop\src\directives\draggable.directive.js:136:49)
    at Draggable.applyDragHandleClass (C:\dev\git_clones\app\node_modules\ng2-drag-drop\src\directives\draggable.directive.js:125:32)
    at Draggable.set [as dragEnabled] (C:\dev\git_clones\app\node_modules\ng2-drag-drop\src\directives\draggable.directive.js:72:18)

Error: Unexpected value 'Ng2DragDropModule' imported by the module

Trying to use it angular2 app generated by angular cli. Default setup (with webpack).
Installed module via npm and trying to import to my app module:
imports: [Ng2DragDropModule]

Everything compiles fine but in browser I got:
Error: Unexpected value 'Ng2DragDropModule' imported by the module 'AppModule'

Importing module like so:
import { Ng2DragDropModule } from 'ng2-drag-drop'

Do you know what it can be?

Thanks for the module btw =)

Issue when item is draggable and droppable

Is this feature not supported right now?

Because I marked a div as both draggable and droppable then I get the error below:

SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()
at Droppable.drop (droppable.js:51)
at Wrapper_Droppable.handleEvent (/Ng2DragDropModule/Droppable/wrapper.ngfactory.js:74)
at View_NavverItemComponent3.handleEvent_0 (/DashboardModule/NavverItemComponent/component.ngfactory.js:708)

Thank you!

Sortable: Items duplicate when being reordered

This is a bit tricky to reproduce.

The sortable directive duplicates item in the list when being re-ordered. It's a bit tricky to reproduce but if items are repeatedly re-ordered in succession it will end with duplicate items in the list.

Some thing like this:

I can't seem to figure out the root cause of this.

Replace instead of sorting

Dear ObaidUrRehman,

I have a requirement to replace the rows instead of sorting in an order. Am i doing a component which is for mapping while drag and drop it changes the order instead of replacing the index. Kindly help me it is possible to replace the item index instead of sorting.

Feature: Add custom dragHelper functionality

The draggable directive should take a dragHelper input that should be a TemplateRef. One should be able to define this in the markup:

<div #myHelper>I am a custom DragHelper</div>

and be able to use it as custom dragHelper. We should also add a default dragHandler that should be a clone of the element since the current one sometimes becomes too transparent to provide a good visual feedback.

CSS is not working in large display screen

Hi Obaid,

I found the when we are trying to drag the element then the dashed box will be visible around the dragged element also we can see the element shadow which is dragged.

But, i large display its not working only the box is visible artificially. I don't know whether this is a bug or not but i found it is happening in the plunker example also.

Sortable: Multi list sorting bug

Item does not get removed from the list when sorted between multiple lists. See below:

Apply droppable.dragOverClass only on parent droppable element

Must apply droppable.dragOverClass only on parent droppable element. Currently it applies that class to element that is under the mouse on hover. This behaviour is confusing because it misleads the user in thinking that they are different drop-off areas.

See the plunkr demo: http://plnkr.co/edit/2bjGgzWnbFrciEiCKLew?p=preview

Feature: Apply class on draggable if drop is not allowed

This will serve as a visual cue to indicate that element cannot be dropped on it

Feature request: dropScope function

It would be great if we could attach a function to dropScope or equivalent, which would get to examine the dragData and determine dynamically if a drop should be allowed.

Drag and Drop Taking More time for large set of data

Hello Obaid,

I am using this library from past 6 month and till now it's very good. But, as my application is growing with huge data sets then drag and drop is taking too much time. Lets say i have 2000 item in a list to drag any item from list and drop it to some area its taking 20-30 seconds, can you suggest what to do in this case?

How to know in which array dropped?

I'm writing a dorm mgmt website using ang2. It will show couple of rooms of a building on the right panel, and students on the left. When I drag a student over to one of the rooms, how can I know which room it's dropped.

This drag and drop api is awesome, but it seems to need to know the array name of the droppable. What if the droppable belongs to a parent array. How can I know which room dropped?

Thanks,
Kevin

Different CSS to the draggable element while in transit

[x] feature request

On some apps we use dragging to transform an element into another. dragClass apply CSS to the element that is being dragglabe and the element in transit. It would be great if whe could apply CSS to both separately. On this way, the css in the element dragabled is different from the element in transit.

Touch enabled

It would be great to have this library touch screen enabled (use swipes for drag and drop). Any plan for this?

Drag text will duplicate last item.

https://nimbus.everhelper.me/client/notes/share/935835/8ec29umtphd0h9f48vx3

'draggable' doesn't disable

I have a draggable div (that is actually images)

 <div draggable *ngFor="let card of player.cardHand" [dragData]="card" class="drag-div">
   <img src="{{cardBluePath + card.fileName}}" class="dragged">
 </div>

They can be dropped on to any of 9 available div's (slots), which populates the droppedItems list (and uses a pipe to filter the object based on the slot

        <div class="slot2" id="slot2" droppable (onDrop)="onItemDrop($event, '2')">
          <div class="panel-body">
            <div *ngFor="let card of droppedItems | slotFilter:{slot:'2'}" class="list-group-item">
              <img src="{{cardBluePath + card.fileName}}"><br>
            </div>
          </div>
        </div>

Once an item is dropped onto a slot, I don't want it to be draggable again. Once it's there, it needs to stay there. Reading the documentation, I thought I needed to set the [draggable] to false, so I did this:

        <div class="slot1" id="slot1" droppable (onDrop)="onItemDrop($event, '1')" [draggable]="false">
          <div class="panel-body" [draggable]="false">
            <div [draggable]="false" *ngFor="let card of droppedItems | slotFilter:{slot:'1'}" class="slot">
              <img src="{{cardBluePath + card.fileName}}" class="dropped" [draggable]="false"><br>
            </div>
          </div>
        </div>

However, the image is still being allowed to be dragged and inspecting the elements, the draggable tag is still = true, even though I am explicitly setting it to false on every element in the block.

Is this an issue, or am I doing something wrong?

Uncaught ReferenceError: exports is not defined

I am using [email protected]
My index.js looks as follows:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ng2_drag_drop_module_1 = require("./src/ng2-drag-drop.module");
exports.Ng2DragDropModule = ng2_drag_drop_module_1.Ng2DragDropModule;
//# sourceMappingURL=index.js.map

The bold line causes the issue, from some initial research I suppose this is a typescript setting, I am not sure if I follow, if it helps here is the ts config:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "plugins": [
      { "name": "tslint-language-service"}
    ]
  }
}```

Is it possible for nested components ?

Feature request: Sort draggable items

Is it able to add a feature to sort the draggable items and re order them?
thx

Can we disable any droppable container

Hello All,

Can we have an option to disable to non-selected droppable container. Let's say we have two droppable container and i want to allow drop only on the selected container. The other container which is not selected i want to disable the drop functionality.

I need to move the component(Example: button component) into the droppable item.

My aim is to move the component(any component) from draggable to droppable. Is there default component which do that stuff?

Drag handle intermittently not working

I have come across an issue with the drag handles, because the current target that is used for the drag handles is updated on mouseover and the drag start requires movement of the mouse to initiate sometimes it does not work. The tracked current target can get updated when the mouse moves off the drag handle before the drag star event fires. This can be seen on the plunkr demo if you click and drag quickly using the drag handle.

I have made a fix in my fork of the project and issued a pull request (#88).

DragImage to be string/label ?

Hi, is there any way where I can customize the dragImage to show a custom string? For example if I drag "item A", i want to show "Dragging item A" and if I drag "item B", i want to show "Dragging item B"?
Other than custom string, can i customize how the dragImage looks like using html controls like div, label, etc?