sortablejs / ngx-sortablejs Goto Github PK
View Code? Open in Web Editor NEWAngular 2+ binding to SortableJS. Previously known as angular-sortablejs
Home Page: https://sortablejs.github.io/ngx-sortablejs/
License: MIT License
Angular 2+ binding to SortableJS. Previously known as angular-sortablejs
Home Page: https://sortablejs.github.io/ngx-sortablejs/
License: MIT License
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() { }
}
@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.
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,
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?
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 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
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?
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.
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.
className not appended after a sort complete.
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
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.
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?
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.
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.
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?
[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:
If we use several sortable widget with a same group option,it renders correctly,but bounded model does not update.
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.
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.
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.
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.
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.
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 } }
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 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>
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
angular 4.0
sortablejs 1.5.1
working on chrome but not in Firefox but the drag and drop is working very well.
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 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.
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,
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?
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
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?
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 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');
}
}
};
}
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
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'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!!
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
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:
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 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.
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',
// ...
};
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'
its easier to point lawyers to :)
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?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.