Fix : resolved being dragged item's position problem #105

- Being dragged Listitem get affected by modal offset - Now when it is being dragged, it has different offset Signed-off-by: bentshrimp <bent_shrimp@kookmin.ac.kr>
AgainIoT · Oct 11, 2023 · 8a26a48 · 8a26a48
1 parent c535642
commit 8a26a48
Showing 1 changed file with 29 additions and 12 deletions.
diff --git a/src/components/common/template/TemplateList.js b/src/components/common/template/TemplateList.js
@@ -21,6 +21,7 @@ import {
 
 // props -> type(pr, readme, contributing)
 export function TemplateList(props) {
+  const viewportNode = document.getElementById("viewport");
   // React state to track order of items
   const [selectedData, setSelectedData] = useState([]);
   const [data, setData] = useState([]);
@@ -143,18 +144,34 @@ export function TemplateList(props) {
                         draggableId={item._id}
                         index={index}
                       >
-                        {(provided) => (
-                          <ListItem
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                            ref={provided.innerRef}
-                          >
-                            {item.title}
-                            <button onClick={() => handleRemove(item._id)}>
-                              Remove
-                            </button>
-                          </ListItem>
-                        )}
+                        {(provided, snapshot) => {
+                          if (snapshot.isDragging) {
+                            provided.draggableProps.style.left =
+                              provided.draggableProps.style.offsetLeft;
+                            provided.draggableProps.style.top =
+                              provided.draggableProps.style.offsetTop;
+                          }
+                          return (
+                            <ListItem
+                              components="div"
+                              disablePadding
+                              {...provided.draggableProps}
+                              {...provided.dragHandleProps}
+                              ref={provided.innerRef}
+                            >
+                              <ListItemText
+                                primary={item.title}
+                                id="PR-desc"
+                                variant="h6"
+                                gutterBottom
+                                color="textSecondary"
+                              />
+                              <button onClick={() => handleRemove(item._id)}>
+                                Remove
+                              </button>
+                            </ListItem>
+                          );
+                        }}
                       </Draggable>
                     ))}
                   </ul>