Playing with dragable

samples/react-kanban-board/src/kanban/KanbanBucket.tsx

@@ -52,10 +52,10 @@ export default class KanbanBucket extends React.Component<IKanbanBucketProps, IK
         
         return (
             <div className={classNames({[styles.bucket]: true, [styles.dragover]: (overBucket && overBucket === bucket)})}
-
+key={bucket}
                 onDragOver={(event) => this.props.onDragOver(event, bucket)}
                 onDragLeave={(event) => this.props.onDragLeave(event, bucket)}
-                onDrop={(event) => this.props.onDragLeave(event, bucket)}
+                onDrop={(event) => this.props.onDrop(event, bucket)}
             >
                 <div className={styles.headline}>
                     <span>{bucketheadline}</span>

samples/react-kanban-board/src/kanban/KanbanComponent.tsx

@@ -125,9 +125,23 @@ export default class KanbanComponent extends React.Component<IKanbanComponentPro
              this.bucketRef.current.classList.remove(styles.dragover)
          }*/
         if (event.dataTransfer.getData("sourcebucket") !== targetbucket) {
-            // other cases no Bucketchange 
+            const sourcebucket = event.dataTransfer.getData("sourcebucket");
+            const source = this.props.buckets.filter(s=>s.bucket == sourcebucket)[0];
+            const target = this.props.buckets.filter(s=>s.bucket == targetbucket)[0];
+            const taskId = event.dataTransfer.getData("taskId");
+            if(this.props.taskactions) {
+                let allowMove= true;
+                if(this.props.taskactions.allowMove) {
+                    allowMove= this.props.taskactions.allowMove(taskId,
+                        source,
+                        target
+                        );
+                }
+                if(allowMove && this.props.taskactions.moved) {
+                    this.props.taskactions.moved(taskId,target);
+                }
+            }
         }
-        
         this.dragelement = null;
         this.setState({
             leavingTaskId: null,

samples/react-kanban-board/src/kanban/MockKanban.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import KanbanComponent from './KanbanComponent';
 import { IKanbanBucket } from './IKanbanBucket';
 import { IKanbanTask } from './IKanbanTask';
+import { findIndex } from "lodash";
 
 export interface IMockKanbanProps { }
 
@@ -58,16 +59,24 @@ export class MockKanban extends React.Component<IMockKanbanProps, IMockKanbanSta
         );
     }
 
+
+
     private _toggleCompleted(taskId: number | string): void {
 //TODO
     }
     private _allowMove(taskId: number | string, prevBucket: IKanbanBucket, targetBucket: IKanbanBucket): boolean {
-        //TODO
+        if(prevBucket.bucket ==='Test2' && targetBucket.bucket ==='Test3') {
+            return false;
+        }
         return true;
     }
 
     private _moved(taskId: number | string, targetBucket: IKanbanBucket): void {
-        //TODO
+        debugger;
+        const elementsIndex = findIndex( this.state.tasks ,element => element.taskId == taskId );
+        let newArray = [...this.state.tasks];
+        newArray[elementsIndex].bucket = targetBucket.bucket;
+        this.setState({tasks:newArray});
 
     }
 }