@progress/kendo-angular-sortable 23.2.1-develop.2 → 23.2.1-develop.3

package/binding.directive.d.ts

@@ -31,7 +31,13 @@ export declare class SortableBindingDirective implements OnInit, OnDestroy {
     private removeHiddenSubscription;
     private dragOverSubscription;
     private navigateSubscription;
+    private dragEndSubscription;
+    private dragStartSubscription;
     private lastTarget;
+    private originalSource;
+    private addedItemIndex;
+    private pendingDataAdd;
+    private pendingDataRemove;
     /**
      * Sets a data-bound array that is used as a data source for the Sortable ([see example](https://www.telerik.com/kendo-angular-ui/components/sortable)).
      */
@@ -48,6 +54,8 @@ export declare class SortableBindingDirective implements OnInit, OnDestroy {
     private removeOriginDraggable;
     private onDragOver;
     private onNavigate;
+    private onDragStart;
+    private onDragEnd;
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SortableBindingDirective, never>;

package/{data-event-args.interface.d.ts → events/data-event-args.interface.d.ts}

@@ -2,6 +2,7 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import type { SortableComponent } from '../sortable.component';
 /**
  * Represents the arguments for the `dataAdd` and `dataRemove` events.
  * @hidden
@@ -15,4 +16,8 @@ export interface DataEvent {
      * Specifies the data item to add or remove.
      */
     dataItem: object;
+    /**
+     * Specifies the Sortable component that emits the event.
+     */
+    sender: SortableComponent;
 }

package/{data-events.d.ts → events/data-events.d.ts}

@@ -4,10 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from './preventable-event';
 import { DataEvent } from './data-event-args.interface';
+import type { SortableComponent } from '../sortable.component';
 /**
  * Represents the arguments for the `SortableComponent` `dataAdd` event.
  */
-export declare class DataAddEvent extends PreventableEvent implements DataEvent {
+export declare class DataAddEvent implements DataEvent {
     /**
      * Specifies the index of the data item.
      */
@@ -16,6 +17,10 @@ export declare class DataAddEvent extends PreventableEvent implements DataEvent
      * Specifies the data item to add.
      */
     dataItem: any;
+    /**
+     * Specifies the Sortable component that emits the event.
+     */
+    sender: SortableComponent;
     /**
      * @hidden
      */
@@ -24,7 +29,7 @@ export declare class DataAddEvent extends PreventableEvent implements DataEvent
 /**
  * Represents the arguments for the `SortableComponent` `dataRemove` event.
  */
-export declare class DataRemoveEvent extends PreventableEvent implements DataEvent {
+export declare class DataRemoveEvent implements DataEvent {
     /**
      * Specifies the index of the data item.
      */
@@ -33,6 +38,10 @@ export declare class DataRemoveEvent extends PreventableEvent implements DataEve
      * Specifies the data item to remove.
      */
     dataItem: any;
+    /**
+     * Specifies the Sortable component that emits the event.
+     */
+    sender: SortableComponent;
     /**
      * @hidden
      */
@@ -54,6 +63,10 @@ export declare class DataMoveEvent extends PreventableEvent implements DataEvent
      * Specifies the data item to move.
      */
     dataItem: any;
+    /**
+     * Specifies the Sortable component that emits the event.
+     */
+    sender: SortableComponent;
     /**
      * @hidden
      */

package/{draggable-event.d.ts → events/draggable-event.d.ts}

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from './preventable-event';
-import { DraggableDirective } from './draggable.directive';
+import { DraggableDirective } from '../draggable.directive';
 /**
  * Represents the arguments for the `DraggableDirective` events.
  * @hidden

package/fesm2022/progress-kendo-angular-sortable.mjs

@@ -194,7 +194,7 @@ const packageMetadata = {
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
     publishDate: 0,
-    version: '23.2.1-develop.2',
+    version: '23.2.1-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -417,10 +417,10 @@ class SortableService {
             this.source.markForCheck();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -431,10 +431,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * @hidden
  */
 class SortableContainer {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableContainer });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableContainer });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableContainer, decorators: [{
             type: Injectable
         }] });
 
@@ -484,10 +484,10 @@ class DraggableDirective {
     updateDisplayStyle() {
         this.renderer.setStyle(this.el.nativeElement, 'display', this.display);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DraggableDirective, deps: [{ token: SortableContainer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: DraggableDirective, isStandalone: true, selector: "[kendoDraggable]", inputs: { index: "index", disabled: "disabled", hidden: "hidden" }, host: { properties: { "class.k-focus": "this._focused" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DraggableDirective, deps: [{ token: SortableContainer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: DraggableDirective, isStandalone: true, selector: "[kendoDraggable]", inputs: { index: "index", disabled: "disabled", hidden: "hidden" }, host: { properties: { "class.k-focus": "this._focused" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DraggableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DraggableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDraggable]',
@@ -513,10 +513,10 @@ class ItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoSortableItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoSortableItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSortableItemTemplate]',
@@ -531,10 +531,10 @@ class PlaceholderTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: PlaceholderTemplateDirective, isStandalone: true, selector: "[kendoSortablePlaceholderTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: PlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: PlaceholderTemplateDirective, isStandalone: true, selector: "[kendoSortablePlaceholderTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: PlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSortablePlaceholderTemplate]',
@@ -1511,7 +1511,10 @@ class SortableComponent {
                 return;
             }
             const target = this.sortableService.target;
-            const index = event.target ? event.target.index : -1;
+            let index = event.target ? event.target.index : -1;
+            if (target && (index === -1 || index === undefined)) {
+                index = target.dragOverIndex;
+            }
             const oldIndex = this.sortableService.originDraggable ? this.sortableService.originIndex : -1;
             this.hintLocation = null;
             const dragEndEvent = new DragEndEvent({ index: index, oldIndex: oldIndex });
@@ -1593,8 +1596,8 @@ class SortableComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: SortableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", trackBy: "trackBy", data: "data", navigable: "navigable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: SortableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", trackBy: "trackBy", data: "data", navigable: "navigable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -1666,7 +1669,7 @@ class SortableComponent {
     }
     `, isInline: true, dependencies: [{ kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["index", "disabled", "hidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSortable',
@@ -1833,7 +1836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 /**
  * Represents the arguments for the `SortableComponent` `dataAdd` event.
  */
-class DataAddEvent extends PreventableEvent {
+class DataAddEvent {
     /**
      * Specifies the index of the data item.
      */
@@ -1842,18 +1845,21 @@ class DataAddEvent extends PreventableEvent {
      * Specifies the data item to add.
      */
     dataItem;
+    /**
+     * Specifies the Sortable component that emits the event.
+     */
+    sender;
     /**
      * @hidden
      */
     constructor(options) {
-        super();
         Object.assign(this, options);
     }
 }
 /**
  * Represents the arguments for the `SortableComponent` `dataRemove` event.
  */
-class DataRemoveEvent extends PreventableEvent {
+class DataRemoveEvent {
     /**
      * Specifies the index of the data item.
      */
@@ -1862,11 +1868,14 @@ class DataRemoveEvent extends PreventableEvent {
      * Specifies the data item to remove.
      */
     dataItem;
+    /**
+     * Specifies the Sortable component that emits the event.
+     */
+    sender;
     /**
      * @hidden
      */
     constructor(options) {
-        super();
         Object.assign(this, options);
     }
 }
@@ -1886,6 +1895,10 @@ class DataMoveEvent extends PreventableEvent {
      * Specifies the data item to move.
      */
     dataItem;
+    /**
+     * Specifies the Sortable component that emits the event.
+     */
+    sender;
     /**
      * @hidden
      */
@@ -1920,7 +1933,13 @@ class SortableBindingDirective {
     removeHiddenSubscription;
     dragOverSubscription;
     navigateSubscription;
+    dragEndSubscription;
+    dragStartSubscription;
     lastTarget;
+    originalSource;
+    addedItemIndex = -1;
+    pendingDataAdd = null;
+    pendingDataRemove = null;
     /**
      * Sets a data-bound array that is used as a data source for the Sortable ([see example](https://www.telerik.com/kendo-angular-ui/components/sortable)).
      */
@@ -1942,29 +1961,22 @@ class SortableBindingDirective {
     addItem(event, sortable) {
         let index = event.index;
         const dataItem = this.sortableService.getSource().data[event.oldIndex];
-        const addEvent = new DataAddEvent({ index: index, dataItem: dataItem });
-        sortable.dataAdd.emit(addEvent);
-        if (!addEvent.isDefaultPrevented()) {
-            if (index === sortable.itemWrappers.length - 1 && !sortable.noDataContainer) {
-                index++;
-            }
-            sortable.addDataItem(dataItem, index);
-        }
-        return !addEvent.isDefaultPrevented();
+        const addEvent = new DataAddEvent({ index: index, dataItem: dataItem, sender: sortable });
+        this.pendingDataAdd = addEvent;
+        sortable.addDataItem(dataItem, index);
+        return { index: index };
     }
     removeItem(event, sortable) {
         const originDraggable = this.sortableService.originDraggable;
-        const removeEvent = new DataRemoveEvent({ index: event.oldIndex, dataItem: sortable.data[event.oldIndex] });
-        sortable.dataRemove.emit(removeEvent);
-        if (!removeEvent.isDefaultPrevented()) {
-            if (originDraggable && originDraggable.parent === sortable) {
-                sortable.hideItem(event.oldIndex, true);
-            }
-            else {
-                sortable.removeDataItem(event.oldIndex);
-            }
+        const originalIndex = this.sortableService.originIndex;
+        const removeEvent = new DataRemoveEvent({ index: originalIndex, dataItem: sortable.data[event.oldIndex], sender: sortable });
+        this.pendingDataRemove = removeEvent;
+        if (originDraggable && originDraggable.parent === sortable) {
+            sortable.hideItem(event.oldIndex, true);
+        }
+        else {
+            sortable.removeDataItem(event.oldIndex);
         }
-        return !removeEvent.isDefaultPrevented();
     }
     moveItem(event, sortable) {
         if (event.index === event.oldIndex) {
@@ -1973,7 +1985,8 @@ class SortableBindingDirective {
         const moveEvent = new DataMoveEvent({
             dataItem: sortable.data[event.oldIndex],
             index: event.index,
-            oldIndex: event.oldIndex
+            oldIndex: event.oldIndex,
+            sender: sortable
         });
         sortable.dataMove.emit(moveEvent);
         if (!moveEvent.isDefaultPrevented()) {
@@ -2006,30 +2019,34 @@ class SortableBindingDirective {
     onDragOver(event) {
         const source = this.sortableService.getSource();
         const target = this.sortableService.target;
-        const targetDraggables = target.draggables.toArray();
         if (event.isDefaultPrevented()) {
             return;
         }
         event.preventDefault();
         if (target === source) {
-            // Skip moveItem if target is the draggable after which item was just added
-            // Ensures item added to the end stays there until further user action
-            if (targetDraggables[event.index] !== this.lastTarget) {
-                this.moveItem(event, target);
+            if (this.addedItemIndex !== -1 && event.index === this.addedItemIndex) {
+                return;
             }
+            this.moveItem(event, target);
             this.lastTarget = undefined;
+            this.addedItemIndex = -1;
+            if (!this.originalSource) {
+                this.pendingDataAdd = null;
+                this.pendingDataRemove = null;
+            }
         }
         else {
             if (!target.itemEnabled(event.index)) {
                 event.index = this.nextEnabledIndex(event.index, target);
             }
-            //Add to target and remove from source
-            if (this.addItem(event, target) && this.removeItem(event, source)) {
-                this.lastTarget = target.draggables.toArray()[event.index];
-                this.removeOriginDraggable();
-                target.activeIndex = event.index;
-                source.activeIndex = -1;
-            }
+            const addResult = this.addItem(event, target);
+            this.removeItem(event, source);
+            this.originalSource = source;
+            this.addedItemIndex = addResult.index;
+            this.lastTarget = undefined;
+            this.removeOriginDraggable();
+            target.activeIndex = addResult.index;
+            source.activeIndex = -1;
         }
     }
     onNavigate(event) {
@@ -2037,7 +2054,8 @@ class SortableBindingDirective {
             const moveEvent = new DataMoveEvent({
                 dataItem: this.sortable.data[event.oldIndex],
                 index: event.index,
-                oldIndex: event.oldIndex
+                oldIndex: event.oldIndex,
+                sender: this.sortable
             });
             this.sortable.dataMove.emit(moveEvent);
             if (!moveEvent.isDefaultPrevented()) {
@@ -2048,21 +2066,98 @@ class SortableBindingDirective {
             this.sortable.activeIndex = event.index;
         }
     }
+    onDragStart(_event) {
+        this.originalSource = null;
+        this.addedItemIndex = -1;
+        this.pendingDataAdd = null;
+        this.pendingDataRemove = null;
+    }
+    onDragEnd(event) {
+        if (event.index === -1 || event.isDefaultPrevented()) {
+            const originDraggable = this.sortableService.originDraggable;
+            const originIndex = this.sortableService.originIndex;
+            if (originDraggable?.parent) {
+                if (originDraggable.parent !== this.sortable) {
+                    const originalSource = originDraggable.parent;
+                    const dataItem = originalSource.data[originDraggable.index];
+                    const currentIndexInTarget = this.sortable.data.indexOf(dataItem);
+                    if (currentIndexInTarget !== -1) {
+                        this.sortable.removeDataItem(currentIndexInTarget);
+                    }
+                    if (originDraggable.hidden) {
+                        originalSource.hideItem(originDraggable.index, false);
+                    }
+                    if (originDraggable.index !== originIndex) {
+                        originalSource.moveItem(originDraggable.index, originIndex);
+                    }
+                    originalSource.dragIndex = -1;
+                    originalSource.dragOverIndex = -1;
+                    originalSource.activeIndex = -1;
+                    this.sortable.dragIndex = -1;
+                    this.sortable.dragOverIndex = -1;
+                    this.sortable.activeIndex = -1;
+                    if (this.removeHiddenSubscription) {
+                        this.removeHiddenSubscription.unsubscribe();
+                        this.removeHiddenSubscription = null;
+                    }
+                }
+                else if (originDraggable.parent === this.sortable) {
+                    if (event.index === -1) {
+                        const currentIndex = this.sortable.dragIndex;
+                        if (currentIndex !== -1 && currentIndex !== originIndex) {
+                            this.sortable.moveItem(currentIndex, originIndex);
+                        }
+                    }
+                    else if (event.index !== event.oldIndex) {
+                        this.sortable.moveItem(event.index, event.oldIndex);
+                    }
+                    this.sortable.dragIndex = -1;
+                    this.sortable.dragOverIndex = -1;
+                    this.sortable.activeIndex = -1;
+                }
+                this.originalSource = null;
+                this.addedItemIndex = -1;
+            }
+            this.pendingDataAdd = null;
+            this.pendingDataRemove = null;
+        }
+        else {
+            const originDraggable = this.sortableService.originDraggable;
+            const isDroppedInDifferentSortable = originDraggable?.parent && originDraggable.parent !== this.sortable;
+            if (isDroppedInDifferentSortable) {
+                if (this.pendingDataAdd) {
+                    this.pendingDataAdd.index = event.index;
+                    this.pendingDataAdd.sender.dataAdd.emit(this.pendingDataAdd);
+                }
+                if (this.pendingDataRemove) {
+                    this.pendingDataRemove.sender.dataRemove.emit(this.pendingDataRemove);
+                }
+            }
+            this.originalSource = null;
+            this.addedItemIndex = -1;
+            this.pendingDataAdd = null;
+            this.pendingDataRemove = null;
+        }
+    }
     ngOnInit() {
+        this.dragStartSubscription = this.sortable.dragStart.subscribe(this.onDragStart.bind(this));
         this.dragOverSubscription = this.sortable.dragOver.subscribe(this.onDragOver.bind(this));
         this.navigateSubscription = this.sortable.navigate.subscribe(this.onNavigate.bind(this));
+        this.dragEndSubscription = this.sortable.dragEnd.subscribe(this.onDragEnd.bind(this));
     }
     ngOnDestroy() {
+        this.dragStartSubscription.unsubscribe();
         this.dragOverSubscription.unsubscribe();
         this.navigateSubscription.unsubscribe();
+        this.dragEndSubscription.unsubscribe();
         if (this.removeHiddenSubscription) {
             this.removeHiddenSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableBindingDirective, deps: [{ token: SortableComponent }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: SortableBindingDirective, isStandalone: true, selector: "[kendoSortableBinding]", inputs: { data: ["kendoSortableBinding", "data"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableBindingDirective, deps: [{ token: SortableComponent }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: SortableBindingDirective, isStandalone: true, selector: "[kendoSortableBinding]", inputs: { data: ["kendoSortableBinding", "data"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSortableBinding]',
@@ -2124,11 +2219,11 @@ const KENDO_SORTABLE = [
  * ```
  */
 class SortableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: SortableModule, imports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective], exports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableModule, providers: [SortableService] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: SortableModule, imports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective], exports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableModule, providers: [SortableService] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SortableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_SORTABLE],

package/index.d.ts

@@ -4,13 +4,13 @@
 *-------------------------------------------------------------------------------------------*/
 export { SortableComponent } from './sortable.component';
 export { SortableModule } from './sortable.module';
-export { PreventableEvent } from './preventable-event';
-export { DraggableEvent } from './draggable-event';
-export { DragStartEvent, DragEndEvent, DragOverEvent } from './sortable-events';
-export { SortableEvent } from './sortable-event-args.interface';
-export { NavigateEvent } from './navigate-event';
-export { DataEvent } from './data-event-args.interface';
-export { DataMoveEvent, DataAddEvent, DataRemoveEvent } from './data-events';
+export { PreventableEvent } from './events/preventable-event';
+export { DraggableEvent } from './events/draggable-event';
+export { DragStartEvent, DragEndEvent, DragOverEvent } from './events/sortable-events';
+export { SortableEvent } from './events/sortable-event-args.interface';
+export { NavigateEvent } from './events/navigate-event';
+export { DataEvent } from './events/data-event-args.interface';
+export { DataMoveEvent, DataAddEvent, DataRemoveEvent } from './events/data-events';
 export { DraggableDirective } from "./draggable.directive";
 export { SortableBindingDirective } from "./binding.directive";
 export { PlaceholderTemplateDirective } from './item-template.directive';

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1772441504,
-  "version": "23.2.1-develop.2",
+  "publishDate": 1772828254,
+  "version": "23.2.1-develop.3",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-sortable",
-  "version": "23.2.1-develop.2",
+  "version": "23.2.1-develop.3",
   "description": "A Sortable Component for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1772441504,
+      "publishDate": 1772828254,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -29,13 +29,13 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.10.0",
-    "@progress/kendo-angular-common": "23.2.1-develop.2",
-    "@progress/kendo-angular-l10n": "23.2.1-develop.2",
+    "@progress/kendo-angular-common": "23.2.1-develop.3",
+    "@progress/kendo-angular-l10n": "23.2.1-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "23.2.1-develop.2",
+    "@progress/kendo-angular-schematics": "23.2.1-develop.3",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/sortable.component.d.ts

@@ -8,7 +8,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { SortableService } from './sortable.service';
 import { DraggableDirective } from './draggable.directive';
 import { SortableContainer } from './sortable-container';
-import { DataAddEvent, DataMoveEvent, DataRemoveEvent } from './data-events';
+import { DataAddEvent, DataMoveEvent, DataRemoveEvent } from './events/data-events';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Sortable component for Angular](https://www.telerik.com/kendo-angular-ui/components/sortable).