1. Home
  2. jQueryのEasyUIドロップ - 学校のカリキュラムの作成

jQueryのEasyUIドロップ - 学校のカリキュラムの作成2024 年の最新の入門チュートリアル。このコースでは jQueryのEasyUI例をダウンロード, について学習できます。

jQueryのEasyUIドロップ - 学校のカリキュラムの作成

このチュートリアルでは、jQueryのEasyUIを使用して、学校のカリキュラムを作成する方法を紹介します。 右側のスケジュールを表示するには、左に表示された学校の科目：我々は2つのテーブルを作成します。 あなたはドラッグすることができますし、学校の科目は、スケジュールセル上に置きました。 学校の科目要素の<divクラスは、= "アイテム">は、セルは<TDクラス= "ドロップ">要素予定です。

表示科目 

	<DIVクラス= "左">
		<表>
			<TR>
				<TD>の<divクラス= "アイテム">英語</ DIV> </ TD>
			</ TR>
			<TR>
				<TD>の<divクラス= "アイテム">科学</ DIV> </ TD>
			</ TR>
			<！ - 他の主題 - >
		</表>
	</ DIV>

ショータイムライン 

	<DIVクラス= "右">
		<表>
			<TR>
				<TDクラス= "空白"> </ TD>
				<TDクラス= "タイトル">月曜日</ TD>
				<TDクラス= "タイトル">火曜日</ TD>
				<TDクラス= "タイトル">水曜日</ TD>
				<TDクラス= "タイトル">木曜日</ TD>
				<TDクラス= "タイトル">金曜日</ TD>
			</ TR>
			<TR>
				<TDクラス= "時間">午前8時</ TD>
				<TDクラス= "ドロップ"> </ TD>
				<TDクラス= "ドロップ"> </ TD>
				<TDクラス= "ドロップ"> </ TD>
				<TDクラス= "ドロップ"> </ TD>
				<TDクラス= "ドロップ"> </ TD>
			</ TR>
			<！ - 他の細胞 - >
		</表>
	</ DIV>

学校の科目の左にドラッグします 

	$（ '。左.item'）。ドラッグ可能な（{
		元に戻す：trueの場合、
		プロキシ：「クローン」
	}）;

タイムテーブル上のセルに入れ、学校の科目 

	$（ '。右td.drop'）。ドロップ可（{
		onDragEnter：関数（）{
			$（この）.addClass（ 'オーバー'）;
		}、
		onDragLeave：関数（）{
			$（この）.removeClass（ 'オーバー'）;
		}、
		onDrop：関数（E、ソース）{
			$（この）.removeClass（ 'オーバー'）;
			（ '割り当て' $（ソース）.hasClass（））{場合
				$（この）.append（ソース）;
			}エルス{
				するvar C = $（ソース）.clone（）addClass（ '割り当て'）;
				$（この）.empty（）追加の（c）;
				c.draggable（{
					元に戻す：真
				}）;
			}
		}
	}）;

ユーザは学校の科目の左側にドラッグし、タイムテーブルのセルに置かれたときに、上記のコードで見ることができるように、onDropコールバック関数が呼び出されます。 私たちは、左側からドラッグソース要素をクローン化し、スケジュールセルに接続します。 学校主題スケジュールから別のセルへのセルをドラッグすると、単にそれに移動します。

jQueryのEasyUI例をダウンロード

jeasyui-dd-timetable.zip

ホットチュートリアル

お問い合わせ

jQueryのEasyUIドロップ - 学校のカリキュラムの作成
10/30