Code Monkey home page Code Monkey logo

ng-dnd's Introduction

Ng DnD

Build Status CodeFactor npm GitHub license

Drag and Drop for Angular.

🙏 This repo is cloned from angular-skyhook. Many thanks for Cormac Relf's work!

Package Description Docs
@ng-dnd/core A toolkit for DnD Docs
@ng-dnd/multi-backend Multi backend system for DnD core Docs
@ng-dnd/sortable Sortable system for DnD core Docs

Quick links

Documentation | Examples

Why I create this project?

The angular-skyhook is a great library, but I had encountered some frustrations.

  • It dosen't support Angular Ivy (v9+), please check this issue for more details.
  • It hasn't been maintained for almost two years, the version of dnd-core and other packages are very old.
  • The naming of some directives and properties aren't very intuitive such as ssSortable.

Compatibility

Angular RxJS @ng-dnd/core
>=17.0.0 7.x 3.x
>=13.0.0 7.x 2.x
>=9.0.0 <13.0.0 6.x 1.x

License

MIT

ng-dnd's People

Contributors

elongberg avatar nzbin avatar robinkamps avatar speelwolf 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

Watchers

 avatar  avatar

ng-dnd's Issues

ng-dnd/sortable event for onhoverLeave

in my spec, I have a hover event that inserts a preview priority--placeholder to show the user where the currently dragged element can be dropped

if item.hover.listId == item.listId, then its pretty easy for me to revert this ephemeral change in the list after the user continues to hover out of of boundaries the domestic list, continue dragging and then hover over a foreign list

but if item.hover.listId != item.listId, then its hard to revert the change in the foreign list array associated with item.hover.listId

is there some sort of onhoverLeave event for SortableSpec< ... > that I can use for this scenerio to trigger a revert of the array (associated with item.hover.listId) to return to its original state before the hover?

thank you for helping me

custom preview offsets

The multibackend dnd-preview-renderer renders the preview with an offset relative to the dragged element and mouse on initial drag movement.
how to archieve that the preview will always render on fixed offset (e.g. x:0 y:0) next to the cursor?
Like: react-dnd/react-dnd#232 (comment)
Thank you very much.

errors on sortable directive render with angular-13

within angular 13 an error is raised for the nested droplist context on simple-kanban.

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: 'false'.. Find more at https://angular.io/errors/NG0100
    at throwErrorIfNoChangesMode (errors.ts:63:9)
    at bindingUpdated (bindings.ts:72:12)
    at ɵɵproperty (property.ts:49:1)
    at KanbanListComponent_ng_template_6_Template (kanban-list.component.html:38:49)

even worse, if you drag one item like crazy between the lists often there is another error thrown:

Error in /turbo_modules/@react-dnd/[email protected]/dist/invariant.cjs.development.js (31:15)
Expected targetIds to be registered.

can you please check, if the example works for you with ng-13?

https://stackblitz.com/edit/github-wfbywn

trouble booting examples locally

when I clone and then cd packages/examples and then npm i, I am getting this error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @ng-dnd/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~13.3.5" from the root project
npm ERR! peer @angular/common@"13.3.11" from @angular/[email protected]
npm ERR! node_modules/@angular/service-worker
npm ERR! peerOptional @angular/service-worker@"^13.0.0 || ^13.3.0-rc.0" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"~13.3.4" from the root project
npm ERR! 1 more (jest-preset-angular)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"13.3.5" from @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR! @angular/platform-browser-dynamic@"~13.3.5" from the root project
npm ERR! peer @angular/platform-browser-dynamic@">=10.0.0" from [email protected]
npm ERR! node_modules/jest-preset-angular
npm ERR! dev jest-preset-angular@"^11.1.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/bmcferren/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/bmcferren/.npm/_logs/2022-09-11T00_16_37_045Z-debug-0.log

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.