ngModelChange.\n * Returns new items collection as a payload.\n */\n /* tslint:disable-next-line: no-any */\n this.onChange = new EventEmitter();\n this.showPlaceholder = false;\n this.activeItem = -1;\n /* tslint:disable-next-line: no-any */\n this.onTouched = Function.prototype;\n /* tslint:disable-next-line: no-any */\n this.onChanged = Function.prototype;\n this.transfer = transfer;\n this.currentZoneIndex = SortableComponent.globalZoneIndex++;\n this.transfer\n .onCaptureItem()\n .subscribe((/**\n * @param {?} item\n * @return {?}\n */\n (item) => this.onDrop(item)));\n }\n /**\n * @return {?}\n */\n get items() {\n return this._items;\n }\n /**\n * @param {?} value\n * @return {?}\n */\n set items(value) {\n this._items = value;\n /** @type {?} */\n const out = this.items.map((/**\n * @param {?} x\n * @return {?}\n */\n (x) => x.initData));\n this.onChanged(out);\n this.onChange.emit(out);\n }\n /**\n * @param {?} event\n * @param {?} item\n * @param {?} i\n * @return {?}\n */\n onItemDragstart(event, item, i) {\n this.initDragstartEvent(event);\n this.onTouched();\n this.transfer.dragStart({\n event,\n item,\n i,\n initialIndex: i,\n lastZoneIndex: this.currentZoneIndex,\n overZoneIndex: this.currentZoneIndex\n });\n }\n /**\n * @param {?} event\n * @param {?} i\n * @return {?}\n */\n onItemDragover(event, i) {\n if (!this.transfer.getItem()) {\n return;\n }\n event.preventDefault();\n /** @type {?} */\n const dragItem = this.transfer.captureItem(this.currentZoneIndex, this.items.length);\n /* tslint:disable-next-line: no-any */\n /** @type {?} */\n let newArray = [];\n if (!this.items.length) {\n newArray = [dragItem.item];\n }\n else if (dragItem.i > i) {\n newArray = [\n ...this.items.slice(0, i),\n dragItem.item,\n ...this.items.slice(i, dragItem.i),\n ...this.items.slice(dragItem.i + 1)\n ];\n }\n else {\n // this.draggedItem.i < i\n newArray = [\n ...this.items.slice(0, dragItem.i),\n ...this.items.slice(dragItem.i + 1, i + 1),\n dragItem.item,\n ...this.items.slice(i + 1)\n ];\n }\n this.items = newArray;\n dragItem.i = i;\n this.activeItem = i;\n this.updatePlaceholderState();\n }\n /**\n * @param {?} event\n * @return {?}\n */\n cancelEvent(event) {\n if (!this.transfer.getItem() || !event) {\n return;\n }\n event.preventDefault();\n }\n /**\n * @param {?} item\n * @return {?}\n */\n onDrop(item) {\n if (item &&\n item.overZoneIndex !== this.currentZoneIndex &&\n item.lastZoneIndex === this.currentZoneIndex) {\n this.items = this.items.filter((/**\n * @param {?} x\n * @param {?} i\n * @return {?}\n */\n (x, i) => i !== item.i));\n this.updatePlaceholderState();\n }\n this.resetActiveItem(undefined);\n }\n /**\n * @param {?} event\n * @return {?}\n */\n resetActiveItem(event) {\n this.cancelEvent(event);\n this.activeItem = -1;\n }\n /**\n * @param {?} callback\n * @return {?}\n */\n registerOnChange(callback) {\n this.onChanged = callback;\n }\n /**\n * @param {?} callback\n * @return {?}\n */\n registerOnTouched(callback) {\n this.onTouched = callback;\n }\n /* tslint:disable-next-line: no-any */\n /**\n * @param {?} value\n * @return {?}\n */\n writeValue(value) {\n if (value) {\n /* tslint:disable-next-line: no-any */\n this.items = value.map((/**\n * @param {?} x\n * @param {?} i\n * @return {?}\n */\n (x, i) => ({\n id: i,\n initData: x,\n value: this.fieldName ? x[this.fieldName] : x\n })));\n }\n else {\n this.items = [];\n }\n this.updatePlaceholderState();\n }\n /**\n * @return {?}\n */\n updatePlaceholderState() {\n this.showPlaceholder = !this._items.length;\n }\n /**\n * @param {?} isActive\n * @return {?}\n */\n getItemStyle(isActive) {\n return isActive\n ? Object.assign({}, this.itemStyle, this.itemActiveStyle)\n : this.itemStyle;\n }\n // tslint:disable-next-line\n /**\n * @private\n * @param {?} event\n * @return {?}\n */\n initDragstartEvent(event) {\n // it is necessary for mozilla\n // data type should be 'Text' instead of 'text/plain' to keep compatibility\n // with IE\n event.dataTransfer.setData('Text', 'placeholder');\n }\n}\nSortableComponent.ɵfac = function SortableComponent_Factory(t) { return new (t || SortableComponent)(ɵngcc0.ɵɵdirectiveInject(DraggableItemService)); };\nSortableComponent.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: SortableComponent, selectors: [[\"bs-sortable\"]], inputs: { wrapperClass: \"wrapperClass\", wrapperStyle: \"wrapperStyle\", itemClass: \"itemClass\", itemStyle: \"itemStyle\", itemActiveClass: \"itemActiveClass\", itemActiveStyle: \"itemActiveStyle\", placeholderClass: \"placeholderClass\", placeholderStyle: \"placeholderStyle\", placeholderItem: \"placeholderItem\", fieldName: \"fieldName\", itemTemplate: \"itemTemplate\" }, outputs: { onChange: \"onChange\" }, exportAs: [\"bs-sortable\"], features: [ɵngcc0.ɵɵProvidersFeature([\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(( /**\n * @return {?}\n */() => SortableComponent)),\n multi: true\n }\n ])], decls: 5, vars: 4, consts: [[3, \"ngClass\", \"ngStyle\", \"dragover\", \"dragenter\", \"drop\", \"mouseleave\"], [3, \"ngClass\", \"ngStyle\", \"dragover\", \"dragenter\", 4, \"ngIf\"], [\"draggable\", \"true\", \"aria-dropeffect\", \"move\", 3, \"ngClass\", \"ngStyle\", \"dragstart\", \"dragend\", \"dragover\", \"dragenter\", 4, \"ngFor\", \"ngForOf\"], [\"defItemTemplate\", \"\"], [3, \"ngClass\", \"ngStyle\", \"dragover\", \"dragenter\"], [\"draggable\", \"true\", \"aria-dropeffect\", \"move\", 3, \"ngClass\", \"ngStyle\", \"dragstart\", \"dragend\", \"dragover\", \"dragenter\"], [3, \"ngTemplateOutlet\", \"ngTemplateOutletContext\"]], template: function SortableComponent_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵelementStart(0, \"div\", 0);\n ɵngcc0.ɵɵlistener(\"dragover\", function SortableComponent_Template_div_dragover_0_listener($event) { return ctx.cancelEvent($event); })(\"dragenter\", function SortableComponent_Template_div_dragenter_0_listener($event) { return ctx.cancelEvent($event); })(\"drop\", function SortableComponent_Template_div_drop_0_listener($event) { return ctx.resetActiveItem($event); })(\"mouseleave\", function SortableComponent_Template_div_mouseleave_0_listener($event) { return ctx.resetActiveItem($event); });\n ɵngcc0.ɵɵtemplate(1, SortableComponent_div_1_Template, 2, 3, \"div\", 1);\n ɵngcc0.ɵɵtemplate(2, SortableComponent_div_2_Template, 2, 11, \"div\", 2);\n ɵngcc0.ɵɵelementEnd();\n ɵngcc0.ɵɵtemplate(3, SortableComponent_ng_template_3_Template, 1, 1, \"ng-template\", null, 3, ɵngcc0.ɵɵtemplateRefExtractor);\n } if (rf & 2) {\n ɵngcc0.ɵɵproperty(\"ngClass\", ctx.wrapperClass)(\"ngStyle\", ctx.wrapperStyle);\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵproperty(\"ngIf\", ctx.showPlaceholder);\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵproperty(\"ngForOf\", ctx.items);\n } }, directives: [ɵngcc1.NgClass, ɵngcc1.NgStyle, ɵngcc1.NgIf, ɵngcc1.NgForOf, ɵngcc1.NgTemplateOutlet], encapsulation: 2 });\nSortableComponent.globalZoneIndex = 0;\n/** @nocollapse */\nSortableComponent.ctorParameters = () => [\n { type: DraggableItemService }\n];\nSortableComponent.propDecorators = {\n fieldName: [{ type: Input }],\n wrapperClass: [{ type: Input }],\n wrapperStyle: [{ type: Input }],\n itemClass: [{ type: Input }],\n itemStyle: [{ type: Input }],\n itemActiveClass: [{ type: Input }],\n itemActiveStyle: [{ type: Input }],\n placeholderClass: [{ type: Input }],\n placeholderStyle: [{ type: Input }],\n placeholderItem: [{ type: Input }],\n itemTemplate: [{ type: Input }],\n onChange: [{ type: Output }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(SortableComponent, [{\n type: Component,\n args: [{\n selector: 'bs-sortable',\n exportAs: 'bs-sortable',\n template: `\nngModelChange.\n * Returns new items collection as a payload.\n * @type {?}\n */\n SortableComponent.prototype.onChange;\n /** @type {?} */\n SortableComponent.prototype.showPlaceholder;\n /** @type {?} */\n SortableComponent.prototype.activeItem;\n /** @type {?} */\n SortableComponent.prototype.onTouched;\n /** @type {?} */\n SortableComponent.prototype.onChanged;\n /**\n * @type {?}\n * @private\n */\n SortableComponent.prototype.transfer;\n /**\n * @type {?}\n * @private\n */\n SortableComponent.prototype.currentZoneIndex;\n /**\n * @type {?}\n * @private\n */\n SortableComponent.prototype._items;\n}\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\nclass SortableModule {\n /**\n * @return {?}\n */\n static forRoot() {\n return { ngModule: SortableModule, providers: [DraggableItemService] };\n }\n}\nSortableModule.ɵfac = function SortableModule_Factory(t) { return new (t || SortableModule)(); };\nSortableModule.ɵmod = /*@__PURE__*/ ɵngcc0.ɵɵdefineNgModule({ type: SortableModule });\nSortableModule.ɵinj = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjector({ imports: [[CommonModule]] });\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(SortableModule, [{\n type: NgModule,\n args: [{\n declarations: [SortableComponent],\n imports: [CommonModule],\n exports: [SortableComponent]\n }]\n }], null, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(SortableModule, { declarations: function () { return [SortableComponent]; }, imports: function () { return [CommonModule]; }, exports: function () { return [SortableComponent]; } }); })();\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n\nexport { DraggableItemService, SortableComponent, SortableModule };\n\n","import { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { CommonModule } from '@angular/common';\r\nimport { RouterModule } from '@angular/router';\r\nimport { SortableModule } from 'ngx-bootstrap/sortable';\r\n\r\nimport { DocsModule } from '@app/shared/components/docs';\r\nimport { SortableSectionComponent } from './sortable-section.component';\r\nimport { DEMO_COMPONENTS } from './demos';\r\nimport { routes } from './demo-sortable.routes';\r\n\r\n@NgModule({\r\n declarations: [\r\n SortableSectionComponent,\r\n ...DEMO_COMPONENTS\r\n ],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n DocsModule,\r\n SortableModule.forRoot(),\r\n RouterModule.forChild(routes)\r\n ],\r\n exports: [SortableSectionComponent],\r\n entryComponents: [...DEMO_COMPONENTS]\r\n})\r\nexport class DemoSortableModule {}\r\n","import { SortableSectionComponent } from './sortable-section.component';\r\n\r\nexport const routes = [{ path: '', component: SortableSectionComponent }];\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-accessibility',\r\n templateUrl: './accessibility.html'\r\n})\r\nexport class DemoAccessibilityComponent {}\r\n","You can use aria-dropeffect=\"...\" and aria-grabbed for .sortable-item. When you start drag item aria-grabbed must have true state.\r\n aria-dropeffect property is defined depending on the grabbed object.
But be careful, these attributes are deprecated.
model: {{ itemStringsLeft | json }}\r\n model: {{ itemStringsRight | json }}\r\n {{ itemObjectsLeft | json }}\r\n {{ itemObjectsRight | json }}\r\n model: {{ itemStringsLeft | json }}\r\n model: {{ itemStringsRight | json }}\r\n The sortable component represents a list of items, with ability to sort them or\r\n move to another container via drag&drop. Input collection isn't mutated by the component,\r\n so events ngModelChange, onChange are using new collections.
The easiest way to add the sortable component to your app (will be added to the root module)
\r\nng add ngx-bootstrap --component sortable\r\n\r\n \r\n\r\n
model: {{ itemStringsLeft | json }}\\r\\n model: {{ itemStringsRight | json }}\\r\\n {{ itemObjectsLeft | json }}\\r\\n {{ itemObjectsRight | json }}\\r\\n model: {{ itemStringsLeft | json }}\\r\\n model: {{ itemStringsRight | json }}\\r\\n