4カリキュラム作成

11456 ワード

このチュートリアルはEasyUIによってどのようにカリキュラムを作成するかを示します.私たちは二つの表を作成します.左は授業で、右は授業表です.コースをドラッグして、レッスン表のセルに置いてもいいです.以下は公式サイトの例です.
http://www.jeasyui.com/tutorial/dd/dnd3_demo.
4.1表示レッスン
bodyタグから2つのレッスンを作成します.以下のようにします.

<div class="left">  
   <table>  
       <tr>  
          <td><div class="item">  </div></td>  
       </tr>  
       <tr>  
          <td><div class="item">  </div></td>  
       </tr>  
       <tr>  
          <td><div class="item">  </div></td>  
       </tr> 
   </table>  
</div>

カリキュラムの外観を設定し、headに挿入する:

<style type="text/css">
.item{
	text-align:center;
	border:1px solid #499B33;
	background:#fafafa;
	width:100px;
}
.left{
	width:120px;
	float:left;
}
.left table{
	background:#E0ECFF;
}
.left td{
	background:#eee;
}
</style>

4.2 レッスン表を表示

<div class="right">  
   <table>  
       <tr>  
          <td class="blank"></td>  
          <td class="title">   </td>  
          <td class="title">   </td>  
          <td class="title">   </td>  
          <td class="title">   </td>  
          <td class="title">   </td>  
        </tr>  
        <tr>  
          <td class="time">08:05—09:45</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr>  
       <tr>  
          <td class="time">10:00—11:40</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr>
       <tr>  
          <td class="time">14:25—16:05</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr> 
       <tr>  
          <td class="time">16:15—17:55</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr> 
       <tr>  
          <td class="time">19:30—21:10</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr>         
   </table>  
</div>

コース表の外観を設定:

.right{
	float:right;
	width:570px;
}
.right table{
	background:#E0ECFF;
	width:100%;
}
.right td{
	text-align:center;
	padding:2px;
	background:#E0ECFF;
}
.right td.drop{
	background:#fafafa;
	width:100px;
}

4.3左コースのドラッグ＆ドロップ効果を設定する
headにJSコードを挿入する:

<script type="text/javascript">
$(function(){
	//  class item div    
	$('.left .item').draggable({  
    revert:true,//   ，   div    
    proxy:'clone' //       
});   
});
</script>

4.4授業表にドラッグ要素を受信させる

//              
$('.right td.drop').droppable({
	
});

このとき、dropスタイルを使ったtdはドラッグ要素を受信できます.以下は、コンテナ(カリキュラム表)が要素を受信した後、カリキュラム情報をカリキュラム表のtdに表示するだけでいいです.OnDropイベントは、ドラッグ可能な要素がターゲットコンテナにドラッグされて配置されるとトリガされることを意味するので、このイベントで表示されるレッスン情報を処理する方法を呼び出すことができます.

//       （        drop td）  
onDrop:function(e,source){
	//       ，        ，              
	var c = $(source).clone().addClass('assigned');
	//        ，      td 
	$(this) .empty().append(c); 
}

レッスン容器を置くスタイルを設定します.

.assigned{
	border:1px solid #BC2A4D;
}

今は自由に左のコースの情報をドラッグして、元のコースをカバーすることができますが、コース表を変更したいですか?明らかにカリキュラムの中の課程はドラッグできません.コピーしたドラッグ要素の設定はドラッグ効果があります.

c.draggable({
	revert:true  //       ，   ，   div    
});

今はコース表の中のコースをドラッグしてもいいですが、別のtdにドラッグしても元のコースは消えません.レッスンテーブルの要素がドラッグされ、他のコンテナ(td)に受信されると、元の要素はコピーせずにそのまま容器に移動します.変更コード:

//              
$('.right td.drop').droppable({
	//       （        drop td）  
	onDrop:function(e,source){
		//             
		if ($(source).hasClass('assigned')){  
            $(this).append(source);  
        } else {//           			
			//       ，        ，              
			var c = $(source).clone().addClass('assigned');
			//        ，      td 
			$(this).empty().append(c); 
			c.draggable({
				revert:true//       ，   ，   div    
			});
		}
	} 
});

テスト運行、すべてOKです.しかし効果は比較的に単調で、私達は元素が容器の上にドラッグされるのが効果を示すのなことを望みます.

$('.right td.drop').droppable({
	//           
	onDragEnter:function(){  
        $(this).addClass('over'); //    
    },  
	//           
    onDragLeave:function(){  
        $(this).removeClass('over');  
    }, 
	//       （        drop td）  
	onDrop:function(e,source){
		$(this).removeClass('over');  
		//             
		if ($(source).hasClass('assigned')){  
            $(this).append(source);  
        } else {//           			
			//       ，        ，              
			var c = $(source).clone().addClass('assigned');
			//        ，      td 
			$(this).empty().append(c); 
			c.draggable({
				revert:true//       ，   ，   div    
			});
		}
	} 
});

overスタイルを設定:

.right td.over{
	background:#FBEC88;
}

付:school Timetable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>   </title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style type="text/css">
.item{
	text-align:center;
	border:1px solid #499B33;
	background:#fafafa;
	width:100px;
}
.left{
	width:120px;
	float:left;
}
.left table{
	background:#E0ECFF;
}
.left td{
	background:#eee;
}
.right{
	float:right;
	width:570px;
}
.right table{
	background:#E0ECFF;
	width:100%;
}
.right td{
	text-align:center;
	padding:2px;
	background:#E0ECFF;
}
.right td.drop{
	background:#fafafa;
	width:100px;
}
.assigned{
	border:1px solid #BC2A4D;
}
.right td.over{
	background:#FBEC88;
}
</style>
<script type="text/javascript">
$(function(){
	//  class item div    
	$('.left .item').draggable({  
    revert:true,//   ，   div    
    proxy:'clone' //       
	});  
	//              
	$('.right td.drop').droppable({
		//           
		onDragEnter:function(){  
        	$(this).addClass('over'); //    
    	},  
		//           
    	onDragLeave:function(){  
        	$(this).removeClass('over');  
    	}, 
		//       （        drop td）  
		onDrop:function(e,source){
			$(this).removeClass('over');  
			//             
			if ($(source).hasClass('assigned')){  
            	$(this).append(source);  
        	} else {//           			
				//       ，        ，              
				var c = $(source).clone().addClass('assigned');
				//        ，      td 
				$(this).empty().append(c); 
				c.draggable({
					revert:true//       ，   ，   div    
				});
			}
		} 
	});	
});
</script>
</head>

<body>
<div class="left">  
   <table>  
       <tr>  
          <td><div class="item">  </div></td>  
       </tr>  
       <tr>  
          <td><div class="item">  </div></td>  
       </tr>  
       <tr>  
          <td><div class="item">  </div></td>  
       </tr> 
   </table>  
</div>
<div class="right">  
   <table>  
       <tr>  
          <td class="blank"></td>  
          <td class="title">   </td>  
          <td class="title">   </td>  
          <td class="title">   </td>  
          <td class="title">   </td>  
          <td class="title">   </td>  
        </tr>  
        <tr>  
          <td class="time">08:05—09:45</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr>  
       <tr>  
          <td class="time">10:00—11:40</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr>
       <tr>  
          <td class="time">14:25—16:05</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr> 
       <tr>  
          <td class="time">16:15—17:55</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr> 
       <tr>  
          <td class="time">19:30—21:10</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr>         
   </table>  
</div>  
</body>
</html>

深入り浅出React Hook s