Coder Social home page Coder Social logo

reppners / ngx-drag-drop Goto Github PK

View Code? Open in Web Editor NEW
304.0 12.0 119.0 7.54 MB

Angular directives using the native HTML Drag And Drop API

Home Page: https://reppners.github.io/ngx-drag-drop/

License: BSD 3-Clause "New" or "Revised" License

TypeScript 70.96% JavaScript 3.23% HTML 21.09% SCSS 4.71%

ngx-drag-drop's Introduction

npm npm (next) NpmLicense GitHub issues Twitter

NgxDragDrop

Demo / StackBlitz Issue Template

npm install ngx-drag-drop --save

Angular directives for declarative drag and drop using the HTML5 Drag-And-Drop API

  • sortable lists by using placeholder element (vertical and horizontal)
  • nestable
  • dropzones optionally support external/native draggables (img, txt, file)
  • conditional drag/drop
  • typed drag/drop
  • utilize EffectAllowed
  • custom CSS classes
  • touch support by using a polyfill
  • AOT compatible

Port of angular-drag-drop-lists but without the lists 😉

This has dropzones though 👍 The idea is that the directive does not handle lists internally so the dndDropzone can be general purpose.

Usage

app.component.html

<!--a draggable element-->
<div [dndDraggable]="draggable.data"
     [dndEffectAllowed]="draggable.effectAllowed"
     [dndDisableIf]="draggable.disable"
     (dndStart)="onDragStart($event)"
     (dndCopied)="onDraggableCopied($event)"
     (dndLinked)="onDraggableLinked($event)"
     (dndMoved)="onDraggableMoved($event)"
     (dndCanceled)="onDragCanceled($event)"
     (dndEnd)="onDragEnd($event)">

    <!--if [dndHandle] is used inside dndDraggable drag can only start from the handle-->
    <div *ngIf="draggable.handle"
         dndHandle>HANDLE
    </div>

    draggable ({{draggable.effectAllowed}}) <span [hidden]="!draggable.disable">DISABLED</span>

    <!--optionally select a child element as drag image-->
    <div dndDragImageRef>DRAG_IMAGE</div>

</div>

<!--a dropzone-->
<!--to allow dropping content that is not [dndDraggable] set dndAllowExternal to true-->
<section dndDropzone
         (dndDragover)="onDragover($event)"
         (dndDrop)="onDrop($event)">

    dropzone

    <!--optional placeholder element for dropzone-->
    <!--will be removed from DOM on init-->
    <div style="border: 1px orangered solid; border-radius: 5px; padding: 15px;"
         dndPlaceholderRef>
        placeholder
    </div>

</section>

app.component

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

import { DndDropEvent } from 'ngx-drag-drop';

@Component()
export class AppComponent {

  draggable = {
    // note that data is handled with JSON.stringify/JSON.parse
    // only set simple data or POJO's as methods will be lost
    data: "myDragData",
    effectAllowed: "all",
    disable: false,
    handle: false
  };

  onDragStart(event:DragEvent) {

    console.log("drag started", JSON.stringify(event, null, 2));
  }

  onDragEnd(event:DragEvent) {

    console.log("drag ended", JSON.stringify(event, null, 2));
  }

  onDraggableCopied(event:DragEvent) {

    console.log("draggable copied", JSON.stringify(event, null, 2));
  }

  onDraggableLinked(event:DragEvent) {

    console.log("draggable linked", JSON.stringify(event, null, 2));
  }

  onDraggableMoved(event:DragEvent) {

    console.log("draggable moved", JSON.stringify(event, null, 2));
  }

  onDragCanceled(event:DragEvent) {

    console.log("drag cancelled", JSON.stringify(event, null, 2));
  }

  onDragover(event:DragEvent) {

    console.log("dragover", JSON.stringify(event, null, 2));
  }

  onDrop(event:DndDropEvent) {

    console.log("dropped", JSON.stringify(event, null, 2));
  }
}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { DndModule } from 'ngx-drag-drop';

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

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

API

// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect
export type DropEffect = "move" | "copy" | "link" | "none";

// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed
export type EffectAllowed = DropEffect | "copyMove" | "copyLink" | "linkMove" | "all";
export type DndDragImageOffsetFunction = ( event:DragEvent, dragImage:Element ) => { x:number, y:number };

@Directive( {
  selector: "[dndDraggable]"
} )
export declare class DndDraggableDirective {

    // the data attached to the drag
    dndDraggable: any;

    // the allowed drop effect
    dndEffectAllowed: EffectAllowed;

    // optionally set the type of dragged data to restrict dropping on compatible dropzones
    dndType?: string;

    // conditionally disable the draggability
    dndDisableIf: boolean;
    dndDisableDragIf: boolean;

    // set a custom class that is applied while dragging
    dndDraggingClass: string = "dndDragging";

    // set a custom class that is applied to only the src element while dragging
    dndDraggingSourceClass: string = "dndDraggingSource";

    // set the class that is applied when draggable is disabled by [dndDisableIf]
    dndDraggableDisabledClass = "dndDraggableDisabled";

    // enables to set a function for calculating custom dragimage offset
    dndDragImageOffsetFunction:DndDragImageOffsetFunction = calculateDragImageOffset;

    // emits on drag start
    readonly dndStart: EventEmitter<DragEvent>;

    // emits on drag
    readonly dndDrag: EventEmitter<DragEvent>;

    // emits on drag end
    readonly dndEnd: EventEmitter<DragEvent>;

    // emits when the dragged item has been dropped with effect "move"
    readonly dndMoved: EventEmitter<DragEvent>;

    // emits when the dragged item has been dropped with effect "copy"
    readonly dndCopied: EventEmitter<DragEvent>;

    // emits when the dragged item has been dropped with effect "link"
    readonly dndLinked: EventEmitter<DragEvent>;

    // emits when the drag is canceled
    readonly dndCanceled: EventEmitter<DragEvent>;
}
export interface DndDropEvent {

    // the original drag event
    event: DragEvent;

    // the actual drop effect
    dropEffect: DropEffect;

    // true if the drag did not origin from a [dndDraggable]
    isExternal:boolean;

    // the data set on the [dndDraggable] that started the drag
    // for external drags use the event property which contains the original drop event as this will be undefined
    data?: any;

    // the index where the draggable was dropped in a dropzone
    // set only when using a placeholder
    index?: number;

    // if the dndType input on dndDraggable was set
    // it will be transported here
    type?: any;
}

@Directive( {
  selector: "[dndDropzone]"
} )
export declare class DndDropzoneDirective {

    // optionally restrict the allowed types
    dndDropzone?: string[];

    // set the allowed drop effect
    dndEffectAllowed: EffectAllowed;

    // conditionally disable the dropzone
    dndDisableIf: boolean;
    dndDisableDropIf: boolean;

    // if draggables that are not [dndDraggable] are allowed to be dropped
    // set to true if dragged text, images or files should be handled
    dndAllowExternal: boolean;

    // if its a horizontal list this influences how the placeholder position
    // is calculated
    dndHorizontal: boolean;

    // set the class applied to the dropzone
    // when a draggable is dragged over it
    dndDragoverClass: string = "dndDragover";

    // set the class applied to the dropzone
    // when the dropzone is disabled by [dndDisableIf]
    dndDropzoneDisabledClass = "dndDropzoneDisabled";

    // emits when a draggable is dragged over the dropzone
    readonly dndDragover: EventEmitter<DragEvent>;

    // emits on successful drop
    readonly dndDrop: EventEmitter<DndDropEvent>;
}

Touch support

Install the mobile-drag-drop module available on npm.

Add the following lines to your js code

import { polyfill } from 'mobile-drag-drop';
// optional import of scroll behaviour
import { scrollBehaviourDragImageTranslateOverride } from "mobile-drag-drop/scroll-behaviour";

polyfill( {
  // use this to make use of the scroll behaviour
  dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride
} );

// workaround to make scroll prevent work in iOS Safari >= 10
try {
  window.addEventListener( "touchmove", function() { }, { passive: false } );
}
catch(e){}

For more info on the polyfill check it out on GitHub https://github.com/timruffles/mobile-drag-drop

Known issues

Firefox

Why?

HTML Drag-And-Drop API implementations are not behaving the same way across browsers.

The directives contained in this module enable declarative drag and drop that "just works" across browsers in a consistent way.

Credits go to the author and contributors of angular-drag-drop-lists.

Maintenance

This project was generated with Angular CLI.

See https://angular.io/guide/creating-libraries

Edit Library

  • run npm run watch:lib for hacking on library

Release Library

  • assure correct version is set in projects/dnd/package.json
  • build library with npm run build:lib
  • publish library with npm run publish:stable (use npm run publish:next for pre-releases)

Edit Docs

  • initially and on lib changes run npm run build:lib to current version of lib available to the demo
  • run npm run start:docs

Release Docs

  • build docs site with npm run build:docs
  • commit and push changes in docs to master

Made with ❤️ & jetbrains & ☕

ngx-drag-drop's People

Contributors

alexanderfsp avatar angular-cli avatar bobbyg603 avatar cavone-leonardo avatar christoffritz avatar dependabot[bot] avatar elytes avatar fchaplin avatar gpaucot avatar hordesalik avatar lcpmarvel avatar moinmarvz avatar mtraynham avatar picheli20 avatar reppners avatar tze-sien-choo avatar vijaysutariajcd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ngx-drag-drop's Issues

Just a question

Is it possible to define a drag template for an element like angular material CKD allow us? In my case I need to use an image.

How to set position of dragged image

I'm using the dndHandle element in the far right of my dndDraggable element, then when I start dragging the dragged image jumps so that the left side is under the cursor, not the right side that was originally clicked. This can be disorienting to be user, is there a way to fix the position of the dragged image?

image

image

Angular 6 upgrade

I gave it an initial pass, but I'm not entirely clear on how the angular-cli works or how it's set up with this project.

Add 'how to use mobile-drag-drop' as polyfill to README

Thanks for the great lib!
It will be even better to add a section in Readme about how to use mobile-drag-drop as polyfills. I spent quite some time to find out that i need to firstly yarn add mobile-drag-drop myself and add this code to polyfills.ts:

import { polyfill } from 'mobile-drag-drop';
// optional import of scroll behaviour
import { scrollBehaviourDragImageTranslateOverride } from "mobile-drag-drop/scroll-behaviour";
polyfill( {
  // use this to make use of the scroll behaviour
  dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride
} );
window.addEventListener( "touchmove", function() {
  // workaround to make scroll prevent work in iOS Safari > 10
} );

nested example problem

Describe the bug
In nested example if we drag 'Got something nested' and drop inside itself, below 'MY_CUSTOM_DRAG_IMAGE' text, will disappear.

Steps to reproduce the behavior:

  1. Go to 'https://reppners.github.io/ngx-drag-drop/'.
  2. Click on 'Nested' tab.
  3. Drag 'Got something nested' node.
  4. drop inside itself, below ' MY_CUSTOM_DRAG_IMAGE' text.

Expected behavior
The Draggged & dropped 'Got something nested' node it would keep without any change.

dndPlaceholder usage

Hi!
I'm trying your library and I have a doubt about how to use the 'dndPlaceholder' property of the drop zones. I've created a demo app and one of the dropzones looks like:

    <td [dndDropzone]="['SERVICE', 'ADDRESS']"
         [dndPlaceholder]="ph1"
         (dndDragover)="onDragover($event)"
         (dndDrop)="onDrop($event)"> 

         <div class="list-group" id="ph1">
           <a href="#" class="list-group-item list-group-item-action"
             *ngFor="let item of itemDest1; let i=index"
             [dndDraggable]="item.data"
             [dndEffectAllowed]="item.effectAllowed"
             [dndDisableIf]="item.disable"
             (dndStart)="onDragStart($event)"
             (dndCopied)="onDraggableCopied($event)"
             (dndLinked)="onDraggableLinked($event)"
             (dndMoved)="onDraggableMoved($event)"
             (dndCanceled)="onDragCanceled($event)"
             (dndEnd)="onDragEnd($event)"
             (click)="selectObj($event, i)">
             {{item.data.nombre}}
           </a>
         </div>
    </td>

When I drag something on the drop zone, I receive a big Javascript error, and when I remove the 'dndPlaceholder' line, it works perfectly. I want to specify that the placeholder is the element with id 'ph1' (the Bootstrap list-group div below). How can I do it?

Thanks a lot, your library is very handy. Cheers!

dndType not working on angular6

Hey, dndType isnt working on angular 6.

I tried to set it on the div like this:
`<div class="cd"
[dndDraggable]="draggable.data"
[dndEffectAllowed]="draggable.effectAllowed"
(dndStart)="onDragStart($event,'section')"
[dndType]="section"

{{ name }}`

and on drop tried to receive it but i always get "undefined".

[Chrome] Drag event does not fire when password input is clicked first

Hi reppners, how are you?
I'm facing a new particular issue using a input password.
The thing is, if i focus the input or try to type on it, the dndDraggingSource don't appear on the element disabling the ability to drag the input. I need to click somewhere else to lose the input focus and then the drag start to work. Is very strange because the issue is only with type password.

'copyMove' from source list to target list

Hey, just wanted to first say thanks for porting drag-and-drop-lists to Angular 2+ 😄. Was a big fan of the old library and all the other alternatives (both ng1 & ngx) have a bunch of issues...

I had a question about drag/drop copyMove, and we can use the "Lists" example from your demo to discuss.

Two of the elements on the left have effectAllowed: move and one is effectAllowed: copyMove. I had to dig through the source code a bit to understand how copyMove here is actually different. It seemed that everything I was doing was just a move operation. I finally stumped upon holding down the ctrl key.

Albeit everything there seems to work properly, I interpreted copyMove as:

  • move if dragged within the same source list
  • copy if dragged into a different list (without hold ctrl)

Is there a way to perform the above functionality? It seems a bit intuitive that a user hold the ctrl key.

Placeholder is not removed in IE11 (+error)

Describe the bug
Placeholder is not removed at startup
In the console :
TypeError: Object doesn't support property or method 'remove'
at DndDropzoneDirective.prototype.ngAfterViewInit (eval code:496:13)
...

To Reproduce
https://stackblitz.com/edit/ngx-drag-drop-issue-template-mquokq
(it is the template without any modification)

Steps to reproduce the behavior:

  1. Open the console on IE11

Expected behavior
Compatibility with IE11

LIB version
1.0.3

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser IE
  • Version 11

DndDropEvent.index may be -1

Describe the bug
When drag and drop is done rapidly, DndDropEvent.index is -1.

To Reproduce
https://ngx-drag-drop-issue-template-hja8ga.stackblitz.io

Steps to reproduce the behavior:
Try to rapidly drag an element. Sometimes, console shows

dropped {
  "event": {
    "isTrusted": true
  },
  "dropEffect": "move",
  "isExternal": false,
  "data": "myDragData",
  "index": -1
}

Expected behavior
We should never get index === -1 (or if so, it should be clearly documented).

Desktop (please complete the following information):

  • OS: Debian Linux
  • Browser Chrome
  • Version 69.0.3497.92 (Official Build) (64-bit)

Additional context
The issue is present in 2.0.0-rc.2 and probably also in 1.0.4.

add "type" in dndDrop event

Currently, when I'm using dndType property it is not possible to determine it in dndDrop event, there is no such property. I expected "type" property to be the same as I set in dndType.
Workaround to get dropped item type is to pass object into dndDraggable input like this:
[dndDraggable]="{item: control, type: 'control'}"
and then in dndDrop($event) it is available in $event.data.type;

Reason: I need to use different logic when different types of data dropped into dropzone

get position while dragging

is is possible to continually get position when dragging, this way we can for example switch pages when drag is close to edges

last npm version mismatch last repository release

Hi @reppners,

First of all, thank you for your work. This repo was exactly what I needed.

I have however an issue using your library in an electron application with webpack and angular. I notice that the last version on npm is aplha0 and not your last release on this repo: v1.0.0-rc.0. I don't know if my issue is related with this mismatch of release version :

ngx-drag-drop-npm-screenshot

Indeed I have to change the "main: index.js" to "main: ngx-drag-drop.umd.js" to get your package working, if not, I get this error :
C:\Users\Jmarc\Documents\Programmation\materia-designer-angular4\src\node_modules\ngx-drag-drop\index.js:1 Uncaught SyntaxError: Unexpected token import.

When I use "ngx-drag-drop.umd.js" instead of "index.js", everything works as expected.

Any help will be greatly appreciated.

Don't show placeholder when hovering draggable source item

Hi, how are you?
I have a question regarding the drag effect.
When you start to drag an item, the item continue being visible and gives the illusion of having an additional item on the list. the same is with only one item, you have the effect of drop on top or below the same item you started to grab. do you think is a good behavior? i think it could be a behavior bug.
Cheers

set dndType on drop in a restricted div.

I m following a typed demo where i am having multiple value in dropzone ie array and when i drop a li in this div its setting the first one in dropzone attribute array but i would like set my self for dndType.
I have searched but i didn't get what i m trying, can you help me how i can achieve this.

Element is not moved after drop end.

I try to use a ngx-drag-drop module but it looks like it is not working properly or I don't know how to use it. When I declare a DIV with dndDraggable and another div with dndDropzone, the dndDraggable element is moved in the browser, dndDropzone gain dndDragover class, but when I want to put element into dndDropzone, it is not dropped. When I attach event dndDrop into dndDropzone, it said, that it's dropped, but element is not showed here.

My code

<aside class="sidebar">
  <div class="block" [dndDraggable]="'my data'"
         [dndEffectAllowed]="'move'"
         [dndDisableIf]="false"
         (dndStart)="onDragStart($event)"
         (dndCopied)="onDragged($event, 'copy')"
         (dndLinked)="onDragged($event, 'link')"
         (dndMoved)="onDragged($event, 'move')"
         (dndCanceled)="onDragged($event, 'none')"
         (dndEnd)="onDragEnd($event)">My block</div>
</aside>

<div class="main" dndDropzone
     dndEffectAllowed="all"
     [dndAllowExternal]="true"
     (dndDrop)="onDrop($event)">
</div>

Cannot find name 'DndDropEvent'.

I just copied the example code into my component and at this code:

  onDrop(event: DndDropEvent) {
    console.log('dropped', JSON.stringify(event, null, 2));
  }

I get this error:

error TS2304: Cannot find name 'DndDropEvent'.

DND moved and DND end event not triggered when drag drop

These events are not triggered even though the drag element has effectallowed as 'all'.Any other constraints for triggering those two events

<div [dndDraggable]="act" [dndType]="act?.type" [dndDisableIf]="act?.isActive" [dndEffectAllowed]="draggable.effectAllowed" (dndMoved)="onDragged()" (dndStart)="onDragStart($event)" (dndEnd)="onDragEnd($event)"></div>

Questions about drop zones

Hi!

I've encapsulated the drop zone inside an Angular 2 component and I have a couple of issues:

  • On the component template file, I've set the 'dndDragoverClass' to be 'highlightBG'. Then, in the component source, I've specified the class in the decorator, like:

    styles: [.highlightBG { background: #f4a }]

But when I hover the drop zone, nothing happens. I've inspected the element and I've realized that it adds a class 'undefined' when I drag over it. Where do I have to declare the css class?

  • When I drag an object from the 'source' container to any of the drop zones, I need to be able to move this object to the other drop zones but not to the one it's dropped. Is there an easy way to do this?

  • Also, I'd like to indentify the source container from where the dragged element comes. It's not a big issue, as I could specify it in the 'data' property, but I wonder if the event contains this data (I coudn't find it).

Thanks in advance.

No Data on external file drop

First of all many thanks for the plugin, it's powerful but simple to use.
Describe the bug
When trying to drop external file from directory in Angular 6+, where do I get the file data/link? You can see what the onDrop event object looks liken in screenshot. The data object is undefined.

To Reproduce

<div style="height:100px;background-color: black;width: 100px" dndDropzone [dndAllowExternal]="true"
         (dndDragover)="onDragover($event)"
         (dndDrop)="onDrop($event)">
      
    dropzone 
    
    <!--optional placeholder element for dropzone-->
    <!--will be removed from DOM on init-->
    <div style="border: 1px orangered solid; border-radius: 5px; padding: 15px;"
         dndPlaceholderRef>
        placeholder
    </div>

  </div>

Expected behavior
There needs to be some kind file event data similar to when we do it manually in html:
<input style="display:none;" type="file" (change)="fileEvent($event)" multiple #file>

Screenshots
onDrop event object
screen shot 2018-10-27 at 9 49 23 am

Desktop (please complete the following information):

  • MacOs
  • angular 6.1.5
  • Chrome 69

Additional context
I am using Ionic 4 in Chrome browser but as it is now pretty decoupled and ultimately straight angular 6 it should be work as per angular 6.1.5.

Nested demo

Small demo for nested drag and drop support

Listitem draggable and dropzone on condition

Is your feature request related to a problem? Please describe.
I'm trying to implement a list that contains Items and Folders, just like a Windows Explorer. The list is sortable via drag and drop and items can be moved inside folder, but, folders cant moved into items. Is it possible to implement something like this with this library?

Describe the solution you'd like
Here is what I tried so far, but with this way folders cant be moved.

<tbody class="table-body dndList" 
	dndDropzone 
	(dndDragover)="onDragover($event)"
	dndEffectAllowed="copyMove"
	(dndDrop)="onDrop($event, listEntries)" >
				        
	 <!--optional placeholder element for dropzone-->
	<!--will be removed from DOM on init-->
	<div  dndPlaceholderRef class="dndPlaceholder"></div>

				                  
	<tr class="table-row"  *ngFor="let entry of listEntries"
		[dndDraggable]="entry"
                [dndDisableIf]="false"
                (dndStart)="onDragStart($event)"
                (dndMoved)="onDragged(entry, listEntries, 'move')"
                (dndCanceled)="onDragged(entry, listEntries, 'none')"
		(dndEnd)="onDragEnd($event)"
		[dndEffectAllowed]="!entry.hasOwnProperty('isFolder') ? 'move' : null"
				
		[attr.dndDropzone] = "entry.hasOwnProperty('isFolder') ? '' : null" 
		(dndDragover)="entry.hasOwnProperty('isFolder') && onDragover($event)"
		[attr.dndEffectAllowed]="entry.hasOwnProperty('isFolder') ? 'copyMove' : null"
		(dndDrop)="entry.hasOwnProperty('subfolders') && onDrop($event, listEntries)" >
</tr>
</tbody>
onDragged(item: any, list: any[], effect: DropEffect) {
    if (effect === 'move') {

      const index = list.indexOf(item);
      list.splice(index, 1);
    }
  }

  onDrop(event: DndDropEvent, list?: any[]) {

    if (list && (event.dropEffect === 'copy'  || event.dropEffect === 'move')) {

      let index = event.index;

      if (typeof index === 'undefined') {

        index = list.length;
      }

      list.splice(index, 0, event.data);
    }
  }

dndMoved fires when draggable element is out of the dropzone [Chrome]

Describe the bug
On Google Chrome dndMoved fires when you drop an element out of the dropZone, this occurs only when you move the draggable element out of the dropZone by the bottom side in a slow way. If you does in a fast way works fine.

To Reproduce
You can reproduce it in all your examples: https://reppners.github.io/ngx-drag-drop/

Steps to reproduce the behavior:

  1. Go to List example
  2. Drag one element slowly out of the dropZone from bottom side
  3. You will see the placeholder doesn't dissapear and if you drop the element the element will not be dropped and the original element will be removed because fires the dndMoved event

Support angular 7

Describe the bug
Angular 7 is currently not formally supported. A warning is produced:

warning " > [email protected]" has incorrect peer dependency "@angular/core@^4.0.0 || ^5.0.0 || ^6.0.0".

How to conditionally allow drop based on direction of drag

Hello I'm using the the dragdrop feature in horizontal context. How could I disable drop on left direction? I'm looking a way to do as material design drag drop cdk. My use case is the following: user need to drop a single controller module index 0 and add expansion module after. He can change expansion module order but not controller module. Just to clarify my case... Let say I have a list of 4 items horizontally, I pick second item and want to display dropplaceholder when I drag to the right direction and hide dropplaceholder when I drag to the left. Any idea how to achieve this? Thanks for your help :)

Duplicated element momentarily when ordering a list

Describe the bug
When adjusting the order of a list, the list has n+1 elements momentarily making it trigger other external components

To Reproduce
https://stackblitz.com/edit/ngx-drag-drop-issue-template-tm

Steps to reproduce the behavior:

  1. Drag 2 items to the right
  2. Invert the order of the 2 items
  3. When it's drag ends, the length of the list is 3 very briefly before adjusting to 2. The extra element is the one that we dragged and changed de order. So if AB, after inverting it goes ABA and BA

Expected behavior
Should never display an extra element when ordering a list

Desktop (please complete the following information):

  • OS: macOS 10.13
  • Browser Chrome Canary
  • Version 70.0.3529.3 canary (64 bits)

iOS Support

Guys, tried to use your control. Works great in all desktop browsers I tried. Howerver, on iOS Safari, both iPhone and iPad drag simply doesn't start at all. It all just goes to scroll.

Tried your examples at https://reppners.github.io/ngx-drag-drop/, also a mess. Doesn't draw correctly, drag doesn't work.

Any plans on addressing that?

flickering, 5th item exist a few ms onDrop() (with 4 items in list)

Hi,

I have 4 items in a ngFor loop, which are draggable.. I follow the code from the example docs..
The callback functions update my model..

but now i see a flickering, a few miliseconds.. a 5th item has been added, and then is removed.

Can we solve this?

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { AbstractControl } from '../../../../node_modules/@angular/forms';
import { Question } from '../../_types/models/question';
import { QuestionDataSource } from '../../_types/models/questionDatasource';

import * as _ from 'lodash';
import { QuestionOption } from '../../_types/models/questionOption';

@Component({
  selector: 'custom-sortable-sequence',
  templateUrl: './custom-sortable-sequence.component.html'
})
export class CustomSortableSequenceComponent implements OnChanges {

  @Input() control: AbstractControl;
  @Input() question: Question;
  @Input() dataSource: QuestionDataSource;

  ngOnChanges(): void {
    this.updateValue();
  }

  // adds the dropped option to our datasource
  onDrop(e: any): void {
    let index = e.index;

    if (typeof index === 'undefined') {
      index = this.dataSource.options.length;
    }

    this.dataSource.options.splice(index, 0, e.data);
  }

  // removes the dropped option from it's old position
  onDragged(option: QuestionOption): void {
    const index = this.dataSource.options.indexOf(option);
    this.dataSource.options.splice(index, 1);
    this.updateValue();
  }

  // update the form control value
  updateValue(): void {
    const formValue = [];
    this.dataSource.options.forEach(option => {
      formValue.push(option.value);
    });

    this.control.setValue(formValue);
  }
}

error trying to run

ERROR in ../node_modules/ngx-drag-drop/dnd-draggable.directive.d.ts(1,53): error TS2307: Cannot find module '@angular/core'.
../node_modules/ngx-drag-drop/dnd-dropzone.directive.d.ts(1,68): error TS2307: Cannot find module '@angular/core'.

Error while dragging event in ngx-drag-drop

I have a div to be dragged with some data i made few modification to data on onDrop() event.the div gets dropped. But if i drag the same div once again I am getting following error

test.html:57 ERROR TypeError: Converting circular structure to JSON
at JSON.stringify ()
at setDragData (ngx-drag-drop.es5.js:43)
at DndDraggableDirective.push../node_modules/ngx-drag-drop/ngx-drag-drop.es5.js.DndDraggableDirective.onDragStart (ngx-drag-drop.es5.js:320)
at Object.eval [as handleEvent] (test:57)
at handleEvent (core.js:10258)
at callWithDebugContext (core.js:11351)
at Object.debugHandleEvent [as handleEvent] (core.js:11054)
at dispatchEvent (core.js:7717)
at core.js:8161
at HTMLDivElement. (platform-browser.js:995)

I am not able to figure out the reason for this issue.Any help on this issue?

RXJS 6

Describe the bug
Got an incompatible peer dependencies error for rxjs when i try to upgrade to the last version of angular (6.1.7) with ng update --all.

Package "ngx-drag-drop" has an incompatible peer dependency to "rxjs" (requires "^5.1.0", would install "6.3.2").

Items bounce when dragging

Hi there!
this is my issue:
I have a nested list of multiple items, and the items have some drop conditions, some of them have predefined children and the user can not drop more items inside (but is possible in the children), the thing is when I drag an item above the drop zone of other item (where the item I'm dragging can not be dropped) the items other items start bouncing.

I solved it duplicating the list and setting it without the drag&drop directives for the items with predefined children, but it would be better if setting the dndDropzone like [dndDropzone]="'none'" was enough

thanks!

Typed demo, move up within Fruits list doesn't work

I think this is an issue with primitives and move operations within their own list. The order of operations is as follows:

  • User drags item 1 into item 0 position and drops
  • onDrop is called with the new index
    • The item data is spliced into the array at it's new index (0)
    • This duplicates the item in the array
  • onDragged is called by the dragend event
    • This removes the first instance of the item, which is unfortunately the one we just dropped

The state essentially looks unchanged. I looked into the order of drag/drop events, and typically dragend is called after drop. Because the item dragged is a primitive, the indexOf would resolve to the newly dropped item.

This can be fixed by instead wrapping the primitive in a simple object, or by handling all functionality of moving inside the drop callback.

I also tried using a let i = index inside the angular template, and performing onDragged(index: number), but Angular resolves that to the newly dropped index, thus removing the newly dropped item.

setDragImage() Issue with Edge

Edge throws an error when using Drag-Drop with a handle due to setDragImage() not being a valid function. Fix (for now) was to comment out the following in ngx-drag-drop.es5.js/ngx-drag-drop.js so that it isn't called:

    // set custom dragimage if present
    // set dragimage if drag is started from dndHandle
    if (typeof this.dndDragImageElementRef !== "undefined"
        || typeof event._dndUsingHandle !== "undefined") {
        setDragImage(event, this.dragImage, this.dndDragImageOffsetFunction);
    }

Cannot read property 'removeChild' of null

Describe the bug
Sometimes "Cannot read property 'removeChild' of null" appears in the console.

To Reproduce
It is quite possible to reproduce it in official demo: https://reppners.github.io/ngx-drag-drop/
Switch to lists tab, and rapidly move elements between first two lists. Then, after a few tries, this appers in the console:

polyfills.ee8636f875…53b14dd.bundle.js:1 Uncaught TypeError: Cannot read property 'removeChild' of null
    at Yl.cleanupDragoverState (main.eeb7da7….bundle.js:1)
    at Yl.onDragLeave (main.eeb7da7….bundle.js:1)
    at HTMLElement.Yl.dragLeaveEventHandler.t (main.eeb7da7….bundle.js:1)
    at t.invokeTask (polyfills.ee8636f875…53b14dd.bundle.js:1)
    at e.runTask (polyfills.ee8636f875…53b14dd.bundle.js:1)
    at e.invokeTask [as invoke] (polyfills.ee8636f875…53b14dd.bundle.js:1)
    at m (polyfills.ee8636f875…53b14dd.bundle.js:1)
    at HTMLElement.b (polyfills.ee8636f875…53b14dd.bundle.js:1)

I can also reproduce the same on my project, where in devel mode, one can see a better stacktrace:

zone.js:192 Uncaught TypeError: Cannot read property 'removeChild' of null
    at DndDropzoneDirective.push../node_modules/ngx-drag-drop/ngx-drag-drop.es5.js.DndDropzoneDirective.cleanupDragoverState (ngx-drag-drop.es5.js:713)
    at DndDropzoneDirective.push../node_modules/ngx-drag-drop/ngx-drag-drop.es5.js.DndDropzoneDirective.onDragLeave (ngx-drag-drop.es5.js:620)
    at HTMLDivElement.DndDropzoneDirective.dragLeaveEventHandler (ngx-drag-drop.es5.js:473)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLDivElement.globalZoneAwareCallback (zone.js:1566)

Expected behavior
This error should not happen.

Desktop (please complete the following information):

  • OS: Debian stable
  • Browser Chrome
  • Version 68.0.3440.106 (Official Build) (64-bit)

I'm running the latest version: 2.0.0-rc.1.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.