dnd com

Author: seraphimrose

app/action/entity.js

@@ -7,8 +7,4 @@ export const addCard = createAction("Add a new card", data => fromJS(data))
 
 export const removeCard = createAction("Remove a card", data => fromJS(data))
 
-export const moveCard = createAction("Move a card", data => fromJS(data))
-
-export const addSlot = createAction("Add a slot", data => fromJS(data))
-
-export const removeSlot = createAction("Remove a slot", data => fromJS(data))
+export const moveCard = createAction("Move a card", data => fromJS(data))

app/component/board/index.js

@@ -116,6 +116,7 @@ export default class Board extends Component {
 								key={value}
 								index={value}
 								list={list.get(value)}
+								rawList={list}
 							/>
 						))}
 						{this.state.isAdding ? (

app/component/card/index.js

@@ -4,7 +4,7 @@ import Icon from 'antd/lib/icon'
 import { DragSource, DropTarget } from 'react-dnd';
 import { findDOMNode } from 'react-dom'
 
-import { removeCard, addSlot, removeSlot } from 'action/entity'
+import { removeCard, moveCard } from 'action/entity'
 import style from './card.css'
 
 const cardDragSource = {
@@ -20,30 +20,31 @@ const cardDropTarget = {
 		if (props.index === monitor.getItem().index) {
 			return ;
 		}
-		const target = findDOMNode(component).getBoundingClientRect();
-		const targetMiddleY = (target.bottom - target.top) / 2;
-		const cursor = monitor.getClientOffset();
 
-		const cur = props.list.get('card')
-		const ind = cur.indexOf(props.index)
-
-		props.board.get('list').forEach(v => {
-			props.dispatch(removeSlot({
-				listIndex: v
-			}))
-		})
+		const target = findDOMNode(component).getBoundingClientRect()
+		const targetMiddleY = target.top + (target.bottom - target.top) / 2;
+		const cursor = monitor.getClientOffset()
 
+		let upFlag
 		if (cursor.y < targetMiddleY) {
-			props.dispatch(addSlot({
-				listIndex: props.listIndex,
-				'new': cur.splice(ind, 0, 'slot')
-			}))
+			upFlag = 1
 		} else {
-			props.dispatch(addSlot({
-				listIndex: props.listIndex,
-				'new': cur.splice(ind + 1, 0, 'slot')
-			}))
+			upFlag = 0
 		}
+		let fromList
+		props.rawList.forEach((v, k) => {
+			if (v.get('card').indexOf(monitor.getItem().index) !== -1) {
+				fromList = k
+			}
+		})
+
+		props.dispatch(moveCard({
+			fromList: fromList,
+			toList: props.listIndex,
+			index: monitor.getItem().index,
+			hoverIndex: props.index,
+			upFlag: upFlag
+		}))
 	}
 }
 
@@ -69,7 +70,6 @@ export default class Card extends Component {
 
 	render() {
 		const {
-			list,
 			card,
 			tag,
 			member,
@@ -84,8 +84,7 @@ export default class Card extends Component {
 		return connectDropTarget(connectDragSource(
 			<div
 				style={{
-					//transform: isDragging && "rotate(10deg)",
-					display: isDragging && "none"
+					opacity: isDragging && 0.5
 				}}
 				className={style.card}
 			>

app/component/list/index.js

@@ -111,17 +111,13 @@ export default class List extends Component {
 						style={{width: 270}}
 					>
 						{list.get('card').map(value => (
-							value !== 'slot' ? (
-								<Card
-									{...this.props}
-									key={value}
-									index={value}
-									listIndex={index}
-									card={card.get(value)}
-								/>
-							) : (
-								<div className={style.slot}></div>
-							)
+							<Card
+								{...this.props}
+								key={value}
+								index={value}
+								listIndex={index}
+								card={card.get(value)}
+							/>
 						))}
 					</Scrollbars>
 					{this.state.isAdding ? (

app/component/list/list.css

@@ -13,15 +13,6 @@
 		padding-bottom: 5px;
 	}
 
-	:local(.slot) {
-		width: 260px;
-		height: 100px;
-		margin-bottom: 8px;
-		background: #ccc;
-		border-radius: 5px;
-		box-shadow: 1px 1px 1px 1px #777;
-	}
-
 	:local(.new) {
 		width: 260px;
 		padding: 6px;

app/component/test/index.js

@@ -11,20 +11,18 @@ export default createReducer({
 	[actions.addCard]: (state, data) => state.mergeDeep(data),
 
 	[actions.removeCard]: (state, data) =>
-		state//.deleteIn(['card', data.get('index')]) // <-- unnecessary?
-			.deleteIn(['list', data.get('listIndex'), 'card',
-				state.getIn(['list', data.get('listIndex'), 'card']).indexOf(data.get('index'))]),
+		state.deleteIn(['list', data.get('listIndex'), 'card',
+			state.getIn(['list', data.get('listIndex'), 'card']).indexOf(data.get('index'))]),
 
-	[actions.addSlot]: (state, data) =>
-		state.setIn(['list', data.get('listIndex'), 'card'], data.get('new')),
-	[actions.removeSlot]: (state, data) => {
-		const index = state.getIn(['list', data.get('listIndex'), 'card']).indexOf('slot')
-		return index !== -1 ? state.deleteIn(['list', data.get('listIndex'), 'card', index]) : state
-	},
-
-
-	[actions.moveCard]: (state, data) =>
-		state.deleteIn(['list', data.get('fromListIndex'), 'card',
-			state.getIn(['list', data.get('fromListIndex'), 'card']).indexOf(data.get('index'))])
-			.setIn(['list', data.get('toListIndex'), 'card'], data.get('new'))
+	[actions.moveCard]: (state, data) => {
+		const sourcePos = state.getIn(['list', data.get('fromList'), 'card']).indexOf(data.get('index'))
+		let insertPos = state.getIn(['list', data.get('toList'), 'card']).indexOf(data.get('hoverIndex'))
+		if (!data.get('upFlag')) {
+			insertPos ++
+		}
+		const newState = state.deleteIn(['list', data.get('fromList'), 'card', sourcePos])
+		const rawCard = newState.getIn(['list', data.get('toList'), 'card'])
+		return newState.setIn(['list', data.get('toList'), 'card'], rawCard.splice(insertPos, 0, data.get('index')))
+	}
+	
 }, initialState)