style boxes when selecting item move target

client/src/app.js

@@ -30,6 +30,10 @@ function App() {
 
   const [dragSource, setDragSource] = useState({});
   const [dragSourceElement, setDragSourceElement] = useState(undefined);
+
+  const [isMoving, setIsMoving] = useState(false);
+  const [moveItem, setMoveItem] = useState(null);
+
   //fetch all box data
   useEffect(() => {
     const fetchData = async () => {
@@ -177,6 +181,11 @@ function App() {
     }
     return false;
   }
+  const handleSelectMoveBox = (boxData, event) => {
+    console.log(`move item: ${moveItem} to box ${boxData._id}`);
+    setMoveItem(null);
+    setIsMoving(false);
+  }
   const boxHandler = {
     handleSubmit: handleSubmitBox,
     handleRemove: handleRemoveBox,
@@ -185,7 +194,8 @@ function App() {
     handleEdit: handleEditBox,
     handleDragStart: handleDragStartBox,
     handleDragOver: handleDragOverBox,
-    handleDrop: handleDropBox
+    handleDrop: handleDropBox,
+    handleSelectMove: handleSelectMoveBox,
   };
 
   const handleModalCloseBox = () => {
@@ -251,6 +261,9 @@ function App() {
     setShowModalItem(true);
   }
   const handleMoveItem = (boxID, itemID) => {
+    setMoveItem(itemID);
+    setIsMoving(true);
+    /*highlight which boxes available to move to*/
     /*...*/
   }
   const handleViewItem = (boxID, itemID) => {
@@ -372,6 +385,7 @@ function App() {
         {filteredData.map((box, index) => {
           return (
             <Box
+              isMoving={isMoving}
               key={index}
               boxData={box}
               boxHandler={boxHandler}

client/src/box.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Item from './item';
 
-const Box = ({ boxData, boxHandler, itemHandler }) => {
+const Box = ({ boxData, boxHandler, itemHandler, isMoving }) => {
     const menu = useRef(null);
     useEffect(() => {
         document.addEventListener('mousedown', handleClick);
@@ -40,10 +40,11 @@ const Box = ({ boxData, boxHandler, itemHandler }) => {
         )
     }
     return (
-        <li className='box' draggable='true'
+        <li className={`${isMoving ? "target" : null} box`} draggable='true'
             onDragStart={(event) => boxHandler.handleDragStart(boxData, event)}
             onDragOver={boxHandler.handleDragOver}
-            onDrop={(event) => boxHandler.handleDrop(boxData, event)}>
+            onDrop={(event) => boxHandler.handleDrop(boxData, event)}
+            onClick={(event) => isMoving && boxHandler.handleSelectMove(boxData, event)}>
             {false && <span>{boxData.sort}</span>}
             <div ref={menu} className='menu-more-container'>{showMenu && moreMenu()}</div>
             <div className='box-header'>

client/src/styles/app.css

@@ -114,7 +114,13 @@ li.box {
     list-style: none;
 
 }
-
+li.box.target {
+    border-color: green;
+}
+li.box.target:hover {
+    cursor: pointer;
+    border-width: 2px;
+}
 .item-menu-more-container {
     z-index: 1;
 }