diff --git a/public/react/src/modules/courses/css/busyWork.css b/public/react/src/modules/courses/css/busyWork.css
index 9e1c6a509..d77954aaf 100644
--- a/public/react/src/modules/courses/css/busyWork.css
+++ b/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{
@@ -173,4 +173,15 @@ p span{
     text-overflow: ellipsis;
     white-space: nowrap;
     display: inline-block;
-}
\ No newline at end of file
+}
+
+.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);
+}
+
diff --git a/public/react/src/modules/courses/ordering/Ordering.js b/public/react/src/modules/courses/ordering/Ordering.js
index c9dc8ed66..54cebac7f 100644
--- a/public/react/src/modules/courses/ordering/Ordering.js
+++ b/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){
-		// 	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))
-		// 	}
-		// }
-
-	}
+	onDragEnd=(result)=>{
 
+		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,36 +163,56 @@ class Ordering extends Component{
 					</div>
 
 					<Spin size="large" spinning={this.state.isSpin}>
-
-						<div className={"educontent mb50 mt40"}>
-						{datas===undefined?"": <Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={this.state.checkBoxValues}>
-							{ datas.map((item, index) => {
-								return (
-									<div className={"mt30 edu-back-white pd1323s relativef ordermidbox"} key={index}>
-										<div className={"clearfix"}>
-											<div className={"item-body"}>
-												<div className={"clearfix ds pr orderSection"}>
-													<p title={item.task_name} className="font-16  color-dark maxwidth865s orderfonttop"
-														 href={`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${item.task_id}/list?tab=0`}>{item.task_name}</p>
-													<p className={"color-grey panel-lightgrey mt16  "}>
-													<span className="topicswidth400">
-														<span className="topsics100 color-grey9 orderfontbom mr20 maxwidth795">{item.user_name}</span>
-														<span className="mr50 color-grey9 orderfontbom maxwidth795">{item.category}</span>
-													</span>
-													</p>
-												</div>
-											</div>
-										</div>
+						<DragDropContext onDragEnd={this.onDragEnd} >
+							<Droppable droppableId={this.props.match.params.ordering_type}>
+								{(provided, snapshot) => (
+									<div
+										ref={provided.innerRef}
+										{...provided.droppableProps}
+										className={"educontent mb50 mt40 droppableul"}
+									>
+										{datas===undefined?"":
+											 datas.map((item, index) => {
+												return (
+													<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"}>
+																			<p title={item.task_name} className="font-16  color-dark maxwidth865s orderfonttop"
+																				 href={`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${item.task_id}/list?tab=0`}>{item.task_name}</p>
+																			<p className={"color-grey panel-lightgrey mt16  "}>
+																			<span className="topicswidth400">
+																				<span className="topsics100 color-grey9 orderfontbom mr20 maxwidth795">{item.user_name}</span>
+																				<span className="mr50 color-grey9 orderfontbom maxwidth795">{item.category}</span>
+																			</span>
+																			</p>
+																		</div>
+																	</div>
+																</div>
+															</div>
+														)}
+													</Draggable>
+												)
+											})
+
+										}
 									</div>
-								)
-
-							})
-							}
-						</Checkbox.Group>
-						}
-
+								)}
+							</Droppable>
+						</DragDropContext>
 
-						</div>
 
 
 						{