added changeset & fixed PR issues

owncloud · Nov 3, 2021 · cd3fbf2 · cd3fbf2
1 parent ad04922
commit cd3fbf2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/changelog/unreleased/enhancement-add-drag-drop-ghost b/changelog/unreleased/enhancement-add-drag-drop-ghost
@@ -0,0 +1,7 @@
+Enhancement: Add Ghost Element for Drag & Drop
+
+We've added a custom ghost element for the drag&drop functionality in the OcTableFiles to
+better visualize the action to the user.
+
+https://github.com/owncloud/web/issues/5788
+https://github.com/owncloud/owncloud-design-system/pull/1754
diff --git a/src/components/molecules/OcTable/GhostElement/GhostElement.vue b/src/components/molecules/OcTable/GhostElement/GhostElement.vue
@@ -6,6 +6,9 @@
 </template>
 
 <script>
+/**
+ * Please head to the OcTableFiles component (https://owncloud.design/#/oC%20Components/OcTableFiles) for a demo of the Ghost Element.
+ */
 export default {
   name: "GhostElement",
   props: {
@@ -31,7 +34,7 @@ export default {
   background-color: transparent;
   padding-top: 4px;
   padding-left: 5px;
-  z-index: 99999;
+  z-index: var(--oc-z-index-modal);
   position: absolute;
   .badge {
     position: absolute;
@@ -52,7 +55,3 @@ export default {
   }
 }
 </style>
-
-<docs>
-
-</docs>
diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
@@ -257,10 +257,9 @@ export default {
   methods: {
     dragOver(event) {
       event.preventDefault()
-      event.target.style.cursor = "move"
     },
     setGhostElement(file, event) {
-      const selection = this.selection
+      const selection = [...this.selection]
       selection.splice(
         selection.findIndex(function (i) {
           return i.id === file.id
@@ -278,7 +277,6 @@ export default {
       event.dataTransfer.setDragImage(ghost, 0, 0)
       event.dataTransfer.dropEffect = "move"
       event.dataTransfer.effectAllowed = "move"
-      event.target.style.cursor = "move"
     },
     dragStart(file, event) {
       if (!this.dragDrop) return
@@ -292,8 +290,6 @@ export default {
       const dropTarget = event.target
       const dropTargetTr = dropTarget.closest("tr")
       const dropFileId = dropTargetTr.dataset.fileId
-
-      event.target.style.cursor = "default"
       this.dropRowStyling(id, true, event)
       this.$emit(EVENT_FILE_DROPPED, dropFileId)
     },