search

reppners / ngx-drag-drop

Angular directives using the native HTML Drag And Drop API
https://reppners.github.io/ngx-drag-drop/
BSD 3-Clause "New" or "Revised" License
300 stars 119 forks source link

Element is not moved after drop end. #24

Closed psalkowski closed 6 years ago

psalkowski commented 6 years ago

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>
reppners commented 6 years ago

Hi,

the dropzone will do nothing but accept the drop. This is intended behavior to make it general purpose.

If you want to implement simple lists with draggable items please refer to the lists demo https://github.com/reppners/ngx-drag-drop/tree/026fca1f0247a88a3c7c8fa5499110fafea20af3/demo/app/list https://reppners.github.io/ngx-drag-drop/

reppners commented 6 years ago

If you need further help or want to enhance documentation feel free to reach out. Until then closing as answered support issue.