Fixed an issue dropping with out placeholder

#456 Fixes #456
lukasoppermann · May 20, 2021 · c97a630 · c97a630
1 parent 908e0df
commit c97a630
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 9 deletions.
diff --git a/__tests__/events/events.test.ts b/__tests__/events/events.test.ts
@@ -173,6 +173,59 @@ describe('Testing events', () => {
     expect(event.dataTransfer.dropEffect).toBe(undefined)
   })
 
+  test('should correctly drop item in place without placeholder', () => {
+    jest.useFakeTimers()
+
+    const placeholder = document.createElement('DIV')
+    sortable(ul, {
+      items: 'li',
+      copy: true,
+      acceptFrom: false,
+      placeholderClass: 'test-placeholder'
+    })
+
+    sortable(ul2, {
+      items: 'li',
+      acceptFrom: 'ul',
+      placeholder,
+      placeholderClass: 'test-placeholder2'
+    })
+
+    let childcount = ul.children.length
+
+    let event = new CustomEvent('dragstart')
+    event.dataTransfer = dataTransferObj
+    Object.defineProperty(event, 'target', {value: li, enumerable: true})
+    ul.dispatchEvent(event)
+
+    event = new CustomEvent('dragover')
+    event.dataTransfer = dataTransferObj
+    fifthLi.dispatchEvent(event)
+    jest.advanceTimersByTime(1)
+    expect(getIndex(placeholder, ul2.children)).not.toEqual(-1)
+    expect(ul.children.length).toEqual(childcount + 1)
+
+    event = new CustomEvent('drop')
+    ul2.dispatchEvent(event)
+    expect(ul.children.length).toEqual(childcount)
+
+    event = new CustomEvent('dragstart')
+    event.dataTransfer = dataTransferObj
+    Object.defineProperty(event, 'target', {value: li, enumerable: true})
+    ul.dispatchEvent(event)
+
+    event = new CustomEvent('dragover')
+    event.dataTransfer = dataTransferObj
+    ul2.dispatchEvent(event)
+    jest.advanceTimersByTime(1)
+    expect(getIndex(placeholder, ul2.children)).toEqual(-1)
+    expect(ul.children.length).toEqual(childcount + 1)
+
+    event = new CustomEvent('drop')
+    ul2.dispatchEvent(event)
+    expect(ul.children.length).toEqual(childcount + 1)
+  })
+
   test.skip('should correctly place moved item into correct index', () => {
     sortable(ul, {
       items: 'li',

diff --git a/docs/html5sortable.js b/docs/html5sortable.js
@@ -1114,10 +1114,17 @@ var sortable = (function () {
                   .filter(function (placeholder) { return placeholder instanceof HTMLElement; })
                   // only elements in DOM
                   .filter(isInDom)[0];
-              // attach element after placeholder
-              insertAfter(visiblePlaceholder, dragging);
-              // remove placeholder from dom
-              visiblePlaceholder.remove();
+              if (visiblePlaceholder) {
+                  // attach element after placeholder
+                  insertAfter(visiblePlaceholder, dragging);
+                  // remove placeholder from dom
+                  visiblePlaceholder.remove();
+              }
+              else {
+                  // set the dropped value to 'true' to delete copied dragging at the time of 'dragend'
+                  addData(dragging, 'dropped', 'false');
+                  return;
+              }
               /*
                * Fires Custom Event - 'sortstop'
                */

diff --git a/src/html5sortable.ts b/src/html5sortable.ts
@@ -475,11 +475,16 @@ export default function sortable (sortableElements, options: configuration|objec
         .filter(placeholder => placeholder instanceof HTMLElement)
         // only elements in DOM
         .filter(isInDom)[0]
-      // attach element after placeholder
-      after(visiblePlaceholder, dragging)
-      // remove placeholder from dom
-      visiblePlaceholder.remove()
-
+      if (visiblePlaceholder) {
+        // attach element after placeholder
+        after(visiblePlaceholder, dragging)
+        // remove placeholder from dom
+        visiblePlaceholder.remove()
+      } else {
+        // set the dropped value to 'true' to delete copied dragging at the time of 'dragend'
+        data(dragging, 'dropped', 'false')
+        return
+      }
       /*
        * Fires Custom Event - 'sortstop'
        */