npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@angular-dnd/sortable

v0.0.18

Published

The **`@angular-dnd/sortable`** is a for of [`@angular-skyhook/sortable`](https://github.com/cormacrelf/angular-skyhook/tree/master/packages/sortable)

Downloads

25

Readme

@angular-dnd/sortable

The @angular-dnd/sortable is a for of @angular-skyhook/sortable

Installation

Make sure you have @angular-dnd/core and a backend installed, ideally @angular-dnd/multi-backend. Read the core docs first, and make sure you have a firm grasp on it.

npm

Installation

yarn add @angular-dnd/sortable

Then add AngularDndSortableModule where required.

import { AngularDndSortableModule } from '@angular-dnd/sortable';

@NgModule({
  imports: [
    // ...
    // AngularDndDndModule.forRoot( ... ),
    AngularDndSortableModule,
  ]
})
export class AppModule {}

A sortable with truly ridiculous levels of customizability

This is different from the hundreds of other sortable libraries, because it is extremely pared back, and makes almost no limiting choices. This is NOT opinionated software.

  • It does no list operations for you. You drive the reordering and reverting yourself.
  • It is not coupled to DOM, so you can render your list and any previews or transit elements however you like.
  • It accepts a SortableSpec to define behaviour, much like a DragSourceSpec or DropTargetSpec but abstracted over a whole sortable and all elements in it.
  • It gives you the complete power of @angular-dnd/core to alter visuals as you see fit.

So yes, it's a bit harder to use than, say, ng2-dragula. Does the extra implementation effort pay off? There are so many cool uses, this section needs headings.

Visuals and interaction
  • You can have non-sortable items inside your container. Like a header that you can still drop on when the sortable is otherwise empty.
  • You control all your visuals with DragSource.listen(), so apply your own classes based on isDragging and friends.
  • Your drag previews are completely customizable (using [dragPreview] or <angular-dnd-preview>) like any other AngularDnd item. Useful for making multi-select. Or axis snapping. Or showing warning messages ('you can't drop that here') alongside your mouse. Go for your life.
  • Your dragged items can morph as they skip between two different lists, because they are completely re-rendered. This is great for a 'form builder' where library items/icons expand into full-size in-place templates when you drag them in.
  • Drag handles are easy, just put the [dragSource] on something else.
Integration and IO
  • You can (in theory) use it with Material mat-tables, or any other list component.
  • You can insert 'external' elements by creating a DragSource (see [ssExternal]).
  • Each sortable item exists as a AngularDnd item that can be dropped onto a normal drop target (like a trash can).
  • You don't need to use plain JS arrays, you can use Angular's FormArray or Immutable.js, because the library doesn't care. (Although you can do native but immutable updates with immer instead).
Data backing
  • You can easily implement the sorting in an @ngrx/store (some helpers make this even easier).
  • You don't have to hijack or revert someone else's predefined sort operations to implement 'multi-select & drag'
  • If you want to build keyboard navigation on top with identical operations, you don't have to mimic someone else's library operations, just refactor your own.

Terminology

  • item: an @angular-dnd/core item, returned from beginDrag. In sortables, all these items are DraggedItem objects.
  • data: one of the JS objects in the backing array. It is opaque to the library, but you need a unique identifier field on it.
  • preview: follows your mouse pixel by pixel. E.g. an HTML5 drag preview or a <angular-dnd-preview> from the multi-backend.
  • transit: you render this as part of the list while there is an item in-flight. Must follow the mouse, but not pixel for pixel.
  • context: a small set of information enabling draggable elements to know where they are (index and data wise) without being coupled to the container's DOM children. Derived from a container and *ngFor data and index.

Usage Overview

Hint: The best way to get started is by reading the example code.

Here's a rough guide:

  1. SortableSpec is the data backing interface for your sortable. It defines the Skyhoook type, what happens when you hover on a new spot, drop an item, etc. Maybe you want to overwrite a list on a single component, maybe you are firing @ngrx/store actions. You must implement it according to the requirements and lifecycle.

  2. For simpler list displays, make a container with <angular-dnd-sortable-list> and provide it an <ng-template ssTemplate let-context> for each element.

  3. For more complicated rendering situations, use ssSortable directive directly, and render an *ngFor inside it, pulling out let i = index as well.

  4. In both options, for each draggable element, you need an [ssRender]="context" directive, which you need to get a reference to, and to finally attach [dragSource]="render.source" somewhere.