updated style for dnd

src/DNDSubblocks.js

@@ -1,48 +1,50 @@
-import { DragSource, DropTarget } from 'react-dnd';
+import { DragSource, DropTarget } from 'react-dnd'
+
+const ItemTypes = {
+  ITEM: 'subblock',
+}
 
 const itemSource = {
   beginDrag(props) {
     return {
       id: props.id,
       index: props.index,
-    };
+    }
   },
-};
-
-const ItemTypes = {
-  ITEM: 'subblock',
-};
+}
 
 const itemTarget = {
   hover(props, monitor, component) {
-    const dragIndex = monitor.getItem().index;
-    const hoverIndex = props.index;
+    const dragIndex = monitor.getItem().index
+    const hoverIndex = props.index
 
     // Don't replace items with themselves
     if (dragIndex === hoverIndex) {
-      return;
+      return
     }
 
     // Time to actually perform the action
-    props.onMoveSubblock(dragIndex, hoverIndex);
+    props.onMoveSubblock(dragIndex, hoverIndex)
 
     // Note: we're mutating the monitor item here!
     // Generally it's better to avoid mutations,
     // but it's good here for the sake of performance
     // to avoid expensive index searches.
-    monitor.getItem().index = hoverIndex;
+    monitor.getItem().index = hoverIndex
   },
-};
+}
 
 const DNDSubblocks = [
-  DropTarget(ItemTypes.ITEM, itemTarget, (connect) => ({
+  DropTarget(ItemTypes.ITEM, itemTarget, (connect, monitor) => ({
     connectDropTarget: connect.dropTarget(),
+    highlighted: monitor.canDrop(),
+    hovered: monitor.isOver(),
   })),
   DragSource(ItemTypes.ITEM, itemSource, (connect, monitor) => ({
     connectDragSource: connect.dragSource(),
     connectDragPreview: connect.dragPreview(),
     isDragging: monitor.isDragging(),
   })),
-];
+]
 
-export default DNDSubblocks;
+export default DNDSubblocks

src/Subblock.jsx

@@ -10,8 +10,11 @@ const Subblock = ({ className, draggable = true, children, subblock }) => {
         draggable
           ? {
               isDragging: subblock.props.isDragging,
+              highlighted: subblock.props.highlighted,
+              hovered: subblock.props.hovered,
             }
           : null,
+
         className,
       )}
       onFocus={subblock.onFocus}

src/volto-subblocks.css

@@ -10,10 +10,25 @@
 }
 
 .volto-subblocks-wrapper .isDragging {
-    border: 1px solid #9bd0e1;
+    background-color: rgba(0, 0, 0, 0.05);
     border-radius: 5px;
 }
 
+.volto-subblocks-wrapper .hovered {
+    position: relative;
+}
+
+.volto-subblocks-wrapper .hovered::after {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.05);
+    content: ' ';
+}
+
 .volto-subblocks-wrapper .dragsubblock:hover {
     color: #007eb1;
 }
@@ -35,6 +50,10 @@
     cursor: move;
 }
 
+.volto-subblocks-wrapper .single-block.subblock-draggable {
+    transform: translateZ(0);
+}
+
 .volto-subblocks-wrapper .single-block.subblock-draggable .ui.basic.button.delete-button {
     left: 24px;
 }