Fix dragging bug

Author: RobbieTheWagner

addon/components/drag-sort-item.hbs

@@ -7,7 +7,7 @@
       {{if this._isDragged '-isDragged'}}
       {{if this.shouldShowPlaceholderBefore '-placeholderBefore'}}
       {{if this.shouldShowPlaceholderAfter '-placeholderAfter'}}"
-    draggable="{{this.draggable}}"
+    draggable={{this.draggable}}
     {{did-insert this.elementInserted}}
     {{on "dragstart" this.dragStart}}
     {{on "dragend" this.dragEnd}}

addon/services/drag-sort.ts

@@ -37,19 +37,10 @@ export default class DragSort extends Service.extend(EventedMixin) {
       sourceList: items,
 
       targetArgs: additionalArgs,
-      targetIndex: index,
+      targetIndex: null,
       targetList: items,
     });
 
-    if (items.length > 1) {
-      if (index === 0) {
-        this.targetIndex = index + 1;
-        this.isDraggingUp = true;
-      } else {
-        this.targetIndex = index - 1;
-      }
-    }
-
     next(() => {
       this.trigger('start', {
         group,

tests/integration/components/drag-sort-targetindex-regression-test.js

@@ -0,0 +1,63 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { findAll, render, triggerEvent } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+import { A } from '@ember/array';
+
+module(
+  'Integration | Component | drag-sort targetIndex regression test',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('service targetIndex should not be set immediately on dragstart', async function (assert) {
+      // This test prevents regression of the bug where targetIndex was being set
+      // immediately on dragstart, which interfered with dragover events in modern Ember
+
+      const items = A([
+        { name: 'Item 1' },
+        { name: 'Item 2' },
+        { name: 'Item 3' },
+      ]);
+
+      this.setProperties({ items });
+
+      await render(hbs`
+      <DragSortList 
+        @items={{this.items}} 
+        @group="test"
+        as |item|
+      >
+        <div class="the-item">{{item.name}}</div>
+      </DragSortList>
+    `);
+
+      const dragSort = this.owner.lookup('service:drag-sort');
+      const itemElements = findAll('.dragSortItem');
+
+      // Initial state - targetIndex should be null
+      assert.strictEqual(
+        dragSort.targetIndex,
+        null,
+        'targetIndex should initially be null',
+      );
+
+      // Start dragging the second item (index 1)
+      await triggerEvent(itemElements[1], 'dragstart', {
+        dataTransfer: new DataTransfer(),
+      });
+
+      // CRITICAL: targetIndex should remain null after dragstart
+      // It should only be set later during actual dragover events
+      // The bug was setting targetIndex = index - 1 immediately, which caused
+      // CSS class conflicts and prevented dragover events from firing properly
+      assert.strictEqual(
+        dragSort.targetIndex,
+        null,
+        'targetIndex should remain null after dragstart - it should only be set during dragover',
+      );
+
+      // Clean up
+      await triggerEvent(itemElements[1], 'dragend');
+    });
+  },
+);