sortablejs / ngx-sortablejs Goto Github PK

I'm encountering an issue where the drag events seem to stop registering. So far in my test this is only happening with touch input. I can reproduce it in Chrome on my Android phone, and also in the Chrome desktop browser with the device simulation in the developer tools turned on.

What seems to be happening is I will start dragging an item, and when I move down to the next item which would trigger the swapping of the two items in the list, it seems to lose the drag tracking, and the ghosted element will freeze in place and stop responding to mouse movement. If I let go and then click on the element the ghost image will disappear.

I have my test page running at: http://dev.lumoplay.com/sortable-test

I attached an image of what it looks like when it stops responding and the ghosted image freezes in place. I have to stop dragging, and click once on the page which seems to reset it.

It doesn't happen every time I drag an element, but it seems to be pretty frequent.

SystemJS configuration instructs to add "'angular-sortablejs': 'node_modules/angular-sortablejs'" to that map object. But when I do I get a 404 looking for "/node_modules/angular-sortablejs/index.js". After peeking at what was installed into node_modules it looks like the index.js is in the "dist" subfolder. I updated the map object with the dist subfolder which got the package working for me.

Is the documentation correct and did I do something wrong? or is the documentation just missing that subfolder?

It emmits errors like

WARNING in ./~/angular-sortablejs/index.js
Cannot find source file 'index.ts': Error: Cannot resolve 'file' or 'directory' ./index.ts in C:\Users\filonov\Desktop\git-git\admin-panel\node_modules\angular-sortablejs

To solve that
helpers.root('node_modules/angular-sortablejs')
should be added to config/webpack.common.js#source-map-loader

Problem
Because of cross-platform drag-drop things the automated testing for this project is close to impossible (even the original library does not have it) and most likely does not worth the effort. That is why I am always forced to test everything on my projects; nearly every change can lead to unpredictable behaviour thus it is hard to maintain the project.

Solution
Adding a demo which will solve the problem above (at least partly) and meanwhile will make it easier to see the library in action.

Is it possible for drag & drop to work when each list is contained within its own component?

I currently have code like the following. On a visual level, drag & drop works (except that items transferred between lists don't show up until a second item is transferred), but the items arrays' actual contents don't change.

Parent component:

import { Component, OnInit } from '@angular/core';
import { ItemsService } from '../items.service';

@Component({
  selector: 'app-multi-list',
  template: `
<h2>Drag / drop the item</h2>
<h3>list 1</h3>
<app-list [(items)]="itemsService.items1"></app-list>
<h3>list 2</h3>
<app-list [(items)]="itemsService.items2"></app-list>

<hr>

<h2>See the result</h2>
<div>
  <h3>list 1</h3>
  <div *ngFor="let item of itemsService.items1">{{ item }}</div>
  <h3>list 2</h3>
  <div *ngFor="let item of itemsService.items2">{{ item }}</div>
</div>
`,
  styleUrls: ['./multi-list.component.css']
})
export class MultiListComponent implements OnInit {

  constructor(public itemsService: ItemsService) { }

  ngOnInit() { }

}

Child component that contains a sortable list:

import { Component, Input, OnInit } from '@angular/core';
import { SortablejsOptions } from 'angular-sortablejs';

@Component({
  selector: 'app-list',
  template: `
<div [sortablejs]="items" [sortablejsOptions]="{ group: 'test' }">
  <div *ngFor="let item of items">{{ item }}</div>
</div>
`,
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {

  @Input() items: any[];

  ngOnInit() { }

}

Thanks for helping out with the other issue, and answering questions.

When looking at updating everything, it looks like the events surfaced in these events, are drag events instead of the sortable js events. I'm wondering if this is intentional, and if it is, is there some other way to grab the sortable event?

sortOptions: SortablejsOptions = { animation: 200, group: 'cards', onEnd: function (evt) { console.log(evt); // surfaces the sortable event }, onAdd: function (evt) { console.log(evt); // surfaces a dragable event so some data is lost } }

Hey guys,

I wanted to implement this nice sortable into my project.
But after installing it I get this errors.

TypeScript error: node_modules/angular-sortablejs/dist/index.d.ts(1,15): Error TS2307: Cannot find module './src/sortablejs-options'.
TypeScript error: node_modules/angular-sortablejs/dist/src/sortablejs.module.d.ts(1,35): Error TS2307: Cannot find module './sortablejs-options'.

And my IDE (WebStorm) shows me the same if I open the file node_modules/angular-sortablejs/dist/index.d.ts.

Same with module file node_modules/angular-sortablejs/dist/src/sortablejs.module.d.ts

Don't know if this is a configuration issue or if this is related to #18.

And.... Happy New Year! 🎉

I'm getting the following warning when trying to upgrade to Angular 5.0.0:

npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none was installed.

I just updated angular-cli to the latest version... Now I cant build my project with sortablejs:

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in node_modules/@angular/core/core.d.ts, resolving symbol SortablejsModule in node_modules/angular-sortablejs/dist/src/sortablejs.module.d.ts, resolving symbol SortablejsModule in node_modules/angular-sortablejs/dist/src/sortablejs.module.d.ts

Can you please help?

Hi,

I am having an issue including Sortablejs within a rollup ahead-of-time build. The error is 'SortablejsModule' is not exported by node_modules\angular-sortablejs\dist\index.js

rollup-config.js (abbreviated)

import rollup      from 'rollup';
import commonjs    from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import uglify      from 'rollup-plugin-uglify';

export default {
entry: 'Scripts/Angular2/main-aot.js',
dest: 'Scripts/Angular2/dist/build.js',
sourceMap: true,
sourceMapFile: 'Scripts/Angular2/dist/build.js.map',
......
plugins: [
  nodeResolve({jsnext: true, module: true}),
  commonjs({
      include: ['node_modules/**']
  }),
  uglify()
]
};

app.module.ts (abbreviated)

import { SortablejsModule } from 'angular-sortablejs';

@NgModule({
    imports: [SortablejsModule],
    .....
})

If I change the import line to import from 'angular-sortablejs/dist/src/sortablejs.module', the build succeeds but an error is thrown in the browser when the directive is used;

The same error occurs if I add this line to the commonjs config of rollup;

namedExports: {  
          'node_modules/angular-sortablejs/dist/index.js' : ['SortablejsModule']
      }

Apologies if I am missing something obvious as I'm fairly new to this.

I guess there's a problem with path in sortablejs.directive.js.
My Angular CLI can't compile project because of it.

EDIT: I've found the issue, Sortablejs is not set as a peer dependency and you have to install it by yourself.

Hi, I'm having a few issues when cloning. I have two lists, the source has config like so:

group: { name: 'formula', pull: 'clone', put: false }

the other simply is the target group

When I drag from the source list, the first drag and drop everything works as expected. The second time, it will add what I can only describe as a semi copy of the dragged item to the target list, and also an actual copy of the next element from the source list which it also removes from the source. The semi-copy seems to be a dom copy of the source item, but doesn't have the properties of the item in the object

If I drag the last item from the source list, angular throws an error as it can't find the object (this happens on the second drag, the first is always OK)

Bit weird - I'm not doing anything funky, should be just two simple lists. One I copy from, the other a list of those copies.

Any ideas?

Hi

I'm working on a sortable component between groups. Everything works good when I'm moving items between groups, but I'm not able to put items to empty groups that had items before. I'm setting the 'group', 'draggable' and 'handle' property for this issue, also, I'm setting the group with min-height options to have a good space to drop the item, but no results. Any hints for that??

this.chipContainerOptions = { group: 'chipgroup', animation: 275, draggable: '.chip-item', handle: '.attribute-chip__content' };

Thanks in advance!!

Hi,

I'm using angular-sortablejs with WebPack and importing the SortablejsModule as:
import { SortablejsModule } from 'angular-sortablejs';

then add it to my @NgModule with:

imports: [SharedModule, routing, SortablejsModule],

The app works correctly, and I can use sortablejs as needed, but I get the following issues during the build output:

./~/angular-sortablejs/dist/index.js
Cannot find source file '../index.ts': Error: Can't resolve '../index.ts' in '/Users/XXXX/dev/XXXX/node_modules/angular-sortablejs/dist'
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://127.0.0.1:3000 ./src/main.ts

./~/angular-sortablejs/dist/src/sortablejs.module.js
Cannot find source file '../../src/sortablejs.module.ts': Error: Can't resolve '../../src/sortablejs.module.ts' in '/Users/XXXX/dev/XXXX/node_modules/angular-sortablejs/dist/src'
 @ ./~/angular-sortablejs/dist/index.js 5:9-43
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://127.0.0.1:3000 ./src/main.ts

./~/angular-sortablejs/dist/src/sortablejs.directive.js
Cannot find source file '../../src/sortablejs.directive.ts': Error: Can't resolve '../../src/sortablejs.directive.ts' in '/Users/XXXX/dev/XXXX/node_modules/angular-sortablejs/dist/src'
 @ ./~/angular-sortablejs/dist/src/sortablejs.module.js 3:29-62
 @ ./~/angular-sortablejs/dist/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://127.0.0.1:3000 ./src/main.ts

Is there any other WebPack config that is needed to stop these errors? Or are there missing files in the npm package?

its easier to point lawyers to :)

If we use several sortable widget with a same group option,it renders correctly,but bounded model does not update.

Hi there. Thanks for this library, first of all.

I'm finding an issue I can't resolve when building a project in AOT mode (everything goes fine in JIT build). Not sure this is the same as #18 , error messages seem different. At compile time I get an error:

Error: Unexpected value 'SortablejsModule' imported by the module 'MyCustomModule'
at xxxx\node_modules@angular\compiler\bundles\compiler.umd.js:17768:46
....

This is with webpack 2.1.0-beta.25 and angular 2.3.1. Tried upgrading to latest angular 2.4.1 and error is still there, just reworded:

Unexpected value 'SortablejsModule in xxxx/node_modules/angular-sortablejs/index.d.ts' imported by the module 'MyCustomModule in yyyy/my-module.ts'

I've met similar issues with other libraries I was depending on, and very often they are related to the library not being compiled through ngc (or Angular CLI), so there's no metadata.json generated file. See e.g. for ng2-bs3-modal, angular-pipes, or others. Other times it can be also due to some provider not being correctly exposed for AOT, as in ng2-redux

Has anyone met this problem before? Sorry for not providing a repro project yet, hopefully the references might give some hint to start.

@angular/forms is not primary angular module and can be skipped in app that uses angular-sortable (ReactiveForms can be used or no Forms module at all). But this lib uses it and it increases final bundle size.

I just started getting these warnings. I'm on 1.5.1. Not sure what version I was using before.

WARNING in ./lib/widget-column/pg-dash-widget-column.component.ts
74:50-67 "export 'SortablejsOptions' was not found in 'angular-sortablejs'

WARNING in ./lib/widget-column/pg-dash-widget-column.component.ts
74:87-104 "export 'SortablejsOptions' was not found in 'angular-sortablejs'

While compilation with ngc I'm getting error

can't resolve module ./sortablejs.directive from node_modules/angular-sortablejs/dist/src/sortablejs.module.d.ts Error: Cannot read property 'SortablejsDirective' of undefined, resolving symbol SortablejsModule in node_modules/angular-sortablejs/dist/src/sortablejs.module.d.ts, resolving symbol SortablejsModule in node_modules/angular-sortablejs/dist/src/sortablejs.module.d.ts

Hi Team,

I have to call another function which passes the new index of the element where w are getting from onUpdate(event.newIndex)..
How to call the onUpdate method..?
Example:

<ul [sortablejs]="items">
<li (onUpdate)=changeIndex(event)>
</li>
<ul>

className not appended after a sort complete.

I want to handle the list changes and send them to a server. However, this does not have the Component's context.

Error example: Plunker

export class App {
  name:string;
  items: string[] = [1, 2, 3, 4, 5];
  
  postChangesToServer() {
    // POST items to server
  }
  
  options: SortablejsOptions = {
    onUpdate: function (event: any) {
        console.log('onUpdate start');
        this.postChangesToServer(); // <-- Crashes here
        console.log('onUpdate end');
      }
    }
  };
  
}

When trying to click on an element which has sortablejs applied, the click goes through but it is also, displaying the cloned item on touch of the element.

Using the dealy property from Sortablejs does not work on touch devices and there are issues related to the same on SortableJs library.

Version:
angular-sortablejs: ^1.3.2
sortablejs: ^1.4.2 (which is used internally by angular-sortablejs since I am using angular 2)

Browser tested on: Chrome (59.0.3071.125) (Android Tablet)

Please refer attached video from the zip file for the same.
touch-clone-error.zip

When you have a multiple sortable options and provide the model as [sortablejs]="modelData" then you get an error, when you do few drag drop across lists.

this seems to work only when you drag drop with in the same list. looking at the lib the array slice is designed to update for single list.

Hi All,

if i generate FormArray dinamically, cant listen changes

  public items:FormArray;

  constructor(private scheduleService: ScheduleService) {
      this.items = new FormArray([]);
      this.items.valueChanges.subscribe(() => 
        console.log('change detected',this.items.value)
      );
  }

  ngOnInit() {
    this.scheduleService.getSchedule() .subscribe(schedule:any[] => 
      schedule.map(item => this.items.push(new FormControl(item)))
    );
  }

when "items" FormArray was created on constructor or defined in property items, the FormArray::valueChanges observable listen changes, but if new FormControls was pushed on the fly, sortener dont propagate changes to "this.items"

any idea?

It seems like a recent PR to provide AoT compatibility overwrote the "normal" dist build config instead of providing an additional build config and integrating that into the package publishing pipeline. See this commit.

The result is that the npm package no longer works for non-AoT setups (as far as I can tell right now anyway). E.g. I get "Unexpected token export" at node_modules/angular-sortablejs/dist/index.js when loading my non-AoT app.

angular 4.0
sortablejs 1.5.1
working on chrome but not in Firefox but the drag and drop is working very well.

Currently the input array is retrieved only when instantiated. The reference to array is passed, so the changes in array items are tracked as they should; however when the reference to array is changed, this won't trigger the items change, see #16.

I got an error when I ran npm install. I have version ^2.1.0 which resolves to 2.2.0:

No provider for InjectionToken Global config for sortablejs

Turns out there is a new way to import:

9f753ea

Breaking change, 2.1.0 is not compatiable with 2.2.0

I use sortableJS in a lot of my projects at version ^2.1.0, and it broke all of them! I guess next time, I cannot use the carrat ^

Hi,

I am using "angular-sortablejs": "^1.3.2" in my angular 2 project.

When in Firefox, on trying to drag elements I receive an error:

TypeError: Polymer.dom is not a function[Learn More] vendor.bundle.js:192570:7
_clone http://localhost:4200/vendor.bundle.js:192570:7
sortableFactory/Sortable.prototype._onDragStart http://localhost:4200/vendor.bundle.js:191783:15
bound self-hosted
[579]/</</ZoneDelegate.prototype.invokeTask http://localhost:4200/polyfills.bundle.js:5779:17
[579]/</</Zone.prototype.runTask http://localhost:4200/polyfills.bundle.js:5578:28
ZoneTask/this.invoke http://localhost:4200/polyfills.bundle.js:5832:28

Which breaks the drag functionality on firefox.

Also, tried using "forceFallback: true / false" in options defined in my .ts file but the above issue persists.

This works fine on chrome without any issues.

I'm using angular 2 material and I had case of sorting items in grid list here, there are Array of Categories and every 3 categories in one row in grid I'm using options of { sort: true, animation: 100 }; the item can drag but not clone or drop or sort,
any help.
Reproducing:
Plnk

Hi, I am getting the following error:

Uncaught ReferenceError: exports is not defined
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:5:23)
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)

Application still works, would just like to fix this in case it causes trouble later on. Thanks.

When I add the SortablejsModule to the imports and run the application I get this error:
Uncaught TypeError: ctorParameters.map is not a function

How can be fixed?

Hi I would like to access 'Sortable data' of 'event.to' after the item is dragged to other sortable list.
i'm using the callbacks, but the event.to only returns the HtmlCollection. however I would like to access the Sortable Object.

I followed your Readme step by step. I have the following error when I import it into app.module.ts

Error: TypeError: ctorParameters.map is not a function at ReflectionCapabilities.parameters (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2118:51) at Reflector.parameters (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2319:52) at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14336:81) at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14301:28) at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14074:30) at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14143:51) at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14136:46) at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14124:52) at Array.forEach (native) Evaluating http://localhost:3000/app/main.js Error loading http://localhost:3000/app/main.js

[email protected] postinstall /Users/pang/workspace/project/letv-bigdata/dataware/scloud-dataware/insight-webapp/node_modules/angular-sortablejs
typings install

module.js:442
throw err;
^

Error: Cannot find module './support/cli'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (/Users/pang/workspace/project/letv-bigdata/dataware/scloud-dataware/insight-webapp/node_modules/.bin/typings:10:13)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "angular-sortablejs" "--save"
npm ERR! node v6.3.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: typings install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-sortablejs package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-sortablejs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-sortablejs
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:

I'm getting this error after updating to ng2 4.0.1

I ran this: npm install --save sortablejs && npm install --save angular-sortablejs

And changed the systemjs configuration as it was not working as it was before. Now its:

var map = {
  'angular-sortablejs': 'node_modules/angular-sortablejs/dist/',
  'sortablejs/Sortable.min': 'node_modules/sortablejs/Sortable.min.js',
}

instead of:

var map = {
  // ...
  'angular-sortablejs': 'node_modules/angular-sortablejs/dist/',
  'sortablejs': 'node_modules/sortablejs/Sortable.js',
  // ...
};

Get this error when using angular-sortablejs .
Solutions provided for this kind of error is to refer .umd.js instead of index.js. But angular-sortablejs doesn't provide .umd.js .
Using angular 4.x. Installed with the steps provided.

My System.config

System.config({
paths: {
'npm:': 'lib/'
},
map: {
app: 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/material':'npm:@angular/material/bundles/material.umd.js',
'@angular/flex-layout':'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
'ng2-md-datatable':'npm:ng2-md-datatable/ng2-md-datatable.umd.js',
'angular-sortablejs': 'npm:angular-sortablejs/dist/',
'sortablejs': 'npm:sortablejs/Sortable.js',
'rxjs': 'npm:rxjs'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
'angular-sortablejs': { main: 'index.js', defaultExtension: 'js' },
rxjs: {
defaultExtension: 'js'
}
}
});
System.import('app')
.then(null, console.error.bind(console));

Hi there, hope this is the right place to ask.
We have an instance of angular-sortablejs working good in Chrome. This is the main gist of list component template:

<div [sortablejs] [sortablejsOptions]="dragOptions">
  <div class="list-group-item"
      *ngFor="let item of listItems; let index = index">

      <customListItem *ngIf="!item.isEditing"
          [field]="item.field" [disabled]="actionsDisabled"
          (edit)="onListItemEdit(index)" (remove)="onListItemRemove(index)">
      </customListItem>

      <customEditItem *ngIf="item.isEditing"
          [field]="item.field" [uniqueId]="index" [disabled]="actionsDisabled"
          [allFields]="allFields"
          (confirm)="onListItemEditConfirm(index, $event)" (cancel)="onListItemEditCancel(index)">
      </customEditItem>

  </div><!-- list-group-item -->
</div>

The custom item template is initially created within DOM, as item.isEditing is initially false, so *ngIf is set to true. Here are the drag options set, constants:

this.dragOptions = {
  onEnd: this.onListItemDragEnd.bind(this),
  handle: '.drag-handle',
};

Within list item component template, there's a button with drag-handle class:

<div class="row">

  <!-- ... item fields ... -->

  <div class="col-md-2">
    <span class="pull-right">
      <!-- this is the drag button -->
      <button type="button" class="btn btn-xs btn-default drag-handle"
              [disabled]="actionsDisabled">
        <span class="glyphicon glyphicon-sort"></span>
        <span class="sr-only">Drag</span>
      </button>
      
      <button type="button" class="btn btn-xs btn-primary" (click)="onEdit()"
              [disabled]="actionsDisabled">
        <span class="glyphicon glyphicon-pencil"></span>
        <span class="sr-only">Edit</span>
      </button>
      
      <button type="button" class="btn btn-xs btn-warning" (click)="onRemove()"
              [disabled]="actionsDisabled">
        <span class="glyphicon glyphicon-minus"></span>
        <span class="sr-only">Delete</span>
      </button>
    </span>
  </div>

</div><!-- row -->

When in Firefox or Edge, no item seems to be draggable. The drag handle receives focus (on Firefox it looks bordered), but the item stays there. From inspection, I can see sortable-chosen class and draggable="true" attribute being set on item, but visually nothing changes.

Here there's a screencast trying to capture the issue:

Is there anyone aware of differences in behaviour among Chrome, Firefox and Edge on this side?

Hi

It good feature for me, but in angular 2 i use *ngFor to repeat over all box in box items array?
I want to the last box is fixed, cannot drag.
How can i configuration that.

Thanks,

First of all thank you for your work. I guess that this module is being useful for everybody here.

I have to say that I read your readme carefully before writing this issue. But, although I was able to install this module and I could make changes client-side, these changes are not reflected in my model property, which is an object array. I followed your instructions by using [sortablejs]='-propertyName-' in the template, but it had no use for me. After changing the order of the elements, the array has the elements in the same position of the beginning in the model property, not in the view (where, in fact, they've changed).

Since I found this problem, I tried a workaround by using the SortableJsOptions. However, inside the event functions you don't have the same context of the Angular Component and you can't modify model properties.

I ran out of possibilities here, am I losing something in my reasoning?

Hi, as I'm using this angular-implementation of sortablejs I want to ask my question here. While testing sortablejs with chrome 60, I recognised that when toggling to the device toolbar (Galaxy S5 for example) and using then a touch event to sort a list, chrome throws the following warning:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

Any idea how to deal with it?

Using angular/cli 1.1.2

I get the following error Can't bind to 'sortablejs' since it isn't a known property of 'div'

"sortablejs": "^1.6.1"
"angular-sortablejs": "^2.0.6"

PS: Angular moved away from "systemjs.config.js" so I'm not sure how to include the lib

Hey,

I am trying to use preventOnFilter option of sortablejs and just figured out that this is missing in the sortablejs-options.ts interface (https://github.com/SortableJS/angular-sortablejs/blob/master/src/sortablejs-options.ts). Is it something not supported or we need to update the interface with all available options? Thanks in advance.

Hello,

It seems animations are broken when the production mode of angular is enabled.

It's easy to reproduce on a fresh angular project :

ng new my-app
npm install --save sortablejs && npm install --save angular-sortablejs

In app.component.html :

<div [sortablejs]="items" [sortablejsOptions]="{ animation: 150 }">
  <div *ngFor="let item of items" style="background-color:red; margin:10px; padding:10px">{{ item }}</div>
</div>

In app.module.ts :

  imports: [
    BrowserModule,
    SortablejsModule
  ],

In app.component.ts :
items = ["A","B"];

Now if you run the project with ng serve , animations work well, but if you start it with ng serve --prod, they don't.
There is the same behavior with ng build and ng build --prod.

I'm using Angular 5.0.5, with CLI 1.5.4, angular-sortable 2.3.0 .

Thanks in advance for your help.

For some reason, sometimes the sortablejsDirective (dist/src/sortablejs.directive.js) do not set the object _sortable properly. So when it comes to execute the ngOnDestroy method, it throws Error: Uncaught (in promise): TypeError: Cannot read property 'destroy' of undefined

Hi.

I have some configuration with onUpdate, where I'm have Angular function

Angular method

When I update my list from drag&drop, I has this error

How do I run onUpdate inside Angular environment?

I'm working on a project using Angular-CLI, which uses webpack. I installed this module from npm following the instructions in the readme. When I import the module into my application module and use the CLI's 'ng serve' to build and run the site locally i get the following error:

ERROR in SortablejsModule is not an NgModule

ERROR in ./~/angular-sortablejs/index.d.ts
Module build failed: Error: Debug Failure. False expression: Output generation failed
at Object.assert