排序功能

public/react/src/modules/courses/css/busyWork.css

@@ -84,7 +84,7 @@ p span{
 }
 
 .orderingbox{
-    width:1240px;
+    width:1200px;
     height:80px;
     background:rgba(255,255,255,1);
     box-shadow:3px 3px 3px rgba(237,237,237,1);
@@ -130,7 +130,7 @@ p span{
     background: rgba(255,255,255,1);
     /* border: 1px solid rgba(205,205,205,1); */
     opacity: 1;
-    margin: 0 auto;
+    margin-left:142px;
 }
 
 .orderfonttop{
@@ -174,3 +174,14 @@ p span{
     white-space: nowrap;
     display: inline-block;
 }
+
+.ordermidbox:active{
+    background:rgba(248,247,255,1);
+    border:1px solid rgba(76,172,255,1);
+}
+
+.ordermidbox:focus{
+    background:rgba(248,247,255,1);
+    border:1px solid rgba(76,172,255,1);
+}
+

public/react/src/modules/courses/ordering/Ordering.js

@@ -1,12 +1,21 @@
 import React,{ Component } from "react";
 import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin,Breadcrumb,Button } from "antd";
 import { WordsBtn,on, off, trigger } from 'educoder';
+import { DragDropContext,Draggable, Droppable} from 'react-beautiful-dnd';
 import axios from'axios';
 import Modals from '../../modals/Modals';
-import moment from 'moment';
 import '../css/members.css';
 import '../css/busyWork.css';
 import NoneData from "../coursesPublic/NoneData";
+
+const reorder = (list, startIndex, endIndex) => {
+	const result = Array.from(list);
+	const [removed] = result.splice(startIndex, 1);
+	result.splice(endIndex, 0, removed);
+
+	return result;
+};
+
 class Ordering extends Component{
 	constructor(props){
 		super(props);
@@ -43,26 +52,65 @@ class Ordering extends Component{
 	}
 
 
-	componentDidUpdate = (prevProps) => {
 
-		// if(prevProps.match.params.main_id != this.props.match.params.main_id){
+	onDragEnd=(result)=>{
-		// 	if(this.props.match.params.main_id!=undefined){
-		// 		this.seactall();
-		// 	}
-		// }
-		// if(prevProps.match.params.category_id != this.props.match.params.category_id){
-		// 	if(this.props.match.params.category_id!=undefined){
-		// 		this.seactall(parseInt(this.props.match.params.category_id))
-		// 	}
-		// }
 
+		if(result.destination!=null&&result.destination!=undefined){
+			let {datas}=this.state;
+			if (!result.destination) {
+				console.log('dropped outside the list')
+				return;
+			}
+			if (result.destination.index === result.source.index) {
+				console.log('the same')
+				return;
 			}
+			this.setState({
+				isSpin:true
+			})
+			const shixuns_list = reorder(
+				datas,
+				result.source.index,
+				result.destination.index
+			);
 
+			let newtask_ids=[]
+			shixuns_list.map((item,key)=>{
+				newtask_ids.push(item.task_id)
+			})
+			this.updatalist(shixuns_list,newtask_ids)
+		}
 
+	}
 
+	updatalist=(shixuns_list,newtask_ids)=>{
 
+		let coursesId=this.props.match.params.coursesId;
+		let ordering_type=this.props.match.params.ordering_type;
+		let url=`/courses/${coursesId}/update_task_position.json`;
+		axios.post(url,{
+			container_type:ordering_type,
+			task_ids:newtask_ids
+		}).then((result)=>{
+			if(result.data.status===0){
+				this.props.showNotification(result.data.message);
+				this.setState({
+					isSpin:false,
+					datas:shixuns_list
+				});
+			}else{
+				this.setState({
+					isSpin:false,
+				});
+			}
 
+		}).catch((error)=>{
+			this.setState({
+				isSpin:false,
+			});
+		})
 
+	}
 
 	render(){
 		let {
@@ -115,12 +163,30 @@ class Ordering extends Component{
 					</div>
 
 					<Spin size="large" spinning={this.state.isSpin}>
-
+						<DragDropContext onDragEnd={this.onDragEnd} >
-						<div className={"educontent mb50 mt40"}>
+							<Droppable droppableId={this.props.match.params.ordering_type}>
-						{datas===undefined?"": <Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={this.state.checkBoxValues}>
+								{(provided, snapshot) => (
-							{ datas.map((item, index) => {
+									<div
+										ref={provided.innerRef}
+										{...provided.droppableProps}
+										className={"educontent mb50 mt40 droppableul"}
+									>
+										{datas===undefined?"":
+											 datas.map((item, index) => {
 												return (
-									<div className={"mt30 edu-back-white pd1323s relativef ordermidbox"} key={index}>
+													<Draggable
+														key={item.task_id}
+														draggableId={item.task_id}
+														index={index}
+														className={"TabsWarps"}
+													>
+														{(provided, snapshot) => (
+															<div className={"mt30 edu-back-white pd1323s relativef ordermidbox"}
+																	 key={index}
+																	 ref={provided.innerRef}
+																	 {...provided.draggableProps}
+																	 {...provided.dragHandleProps}
+															>
 																<div className={"clearfix"}>
 																	<div className={"item-body"}>
 																		<div className={"clearfix ds pr orderSection"}>
@@ -136,15 +202,17 @@ class Ordering extends Component{
 																	</div>
 																</div>
 															</div>
+														)}
+													</Draggable>
 												)
-
 											})
-							}
-						</Checkbox.Group>
-						}
-
 
+										}
 									</div>
+								)}
+							</Droppable>
+						</DragDropContext>
+
 
 
 						{