static/js/shop.jsx

@@ -10,12 +10,18 @@ import { v4 as uuidv4 } from 'uuid';
 
 const data = window.shop_data;
 
-const productStyle = (style, snapshot, removeAnim, hovered, selected) => {
+const productStyle = (style, snapshot, removeAnim, hovered, selected, cart=false) => {
   const custom = {
     opacity: snapshot.isDragging ? .7 : 1,
     backgroundColor: (hovered || selected) ? '#eae7f7' : 'initial',
   };
 
+  if (!cart && snapshot.draggingOver == null && // hack for backlog
+      ((!snapshot.isDragging) // prevent next elements from animation
+      || (snapshot.isDragging && snapshot.isDropAnimating))) { // prevent dragged element from weird animation
+    style.transform = "none";
+  }
+
   if (!snapshot.isDropAnimating) {
     return { ...style, ...custom};
   }
@@ -680,6 +686,7 @@ class ProductCartItem extends React.PureComponent {
                 true,
                 hovered ? true : false,
                 model.selected ? true : false,
+                    true
               )}}
               onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
               onMouseLeave={this.handleOnMouseLeaveRemoveItem.bind(this, index)}
@@ -1965,23 +1972,25 @@ class Shop extends React.PureComponent {
     switch(source.droppableId) {
 
       case 'backlog':
-        this.setState({
-          ...this.state,
-          newCardJustAdded: newAdded ? true : false,
-          columns: {
-            ...this.state.columns,
-            [destination.droppableId]: {
-              ...this.state.columns[destination.droppableId],
-              items: copy(
-                this.state.items,
-                this.state.columns[source.droppableId],
-                this.state.columns[destination.droppableId],
-                draggableId,
-                destination,
-              ),
+        if (source.droppableId !== destination.droppableId) {
+          this.setState({
+            ...this.state,
+            newCardJustAdded: newAdded ? true : false,
+            columns: {
+              ...this.state.columns,
+              [destination.droppableId]: {
+                ...this.state.columns[destination.droppableId],
+                items: copy(
+                    this.state.items,
+                    this.state.columns[source.droppableId],
+                    this.state.columns[destination.droppableId],
+                    draggableId,
+                    destination,
+                ),
+              },
             },
-          },
-        });
+          });
+        }
         break;
 
       case destination.droppableId:

webpack.config.js

@@ -17,6 +17,8 @@ module.exports = {
             }
         ]
     },
+    //devtool: "inline-source-map",
+    //mode: "development"
     devtool: false,
     mode: "production"
 };