jQuery를 EasyUI 드롭 - 학교 교육 과정 만들기
이 튜토리얼은 어떻게 jQuery를 EasyUI를 사용하여 학교 교육 과정을 만드는 방법을 보여줍니다. 오른쪽에있는 일정을 표시하려면 왼쪽에 표시 학교 과목 : 우리는 두 개의 테이블을 생성합니다. 당신은 드래그 할 수 있습니다 및 학교 과목은 일정 셀에 배치합니다. 학교 주제는 <DIV 클래스 = "항목"> 요소, 셀은 시간표 요소를 <TD 클래스 = "드롭">.
디스플레이 학교 과목
<사업부 클래스 = "왼쪽"> <표> <TR> <TD> <DIV 클래스 = "항목"> 영어 </ DIV> </ TD> </ TR> <TR> <TD> <DIV 클래스 = "항목"> 과학 </ DIV> </ TD> </ TR> <! - 다른 주제 -> </ 테이블> </ 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'). 드래그 가능한 ({ 복귀 : 사실, 프록시 : '클론' });
시간표의 셀에 배치 학교 과목
$ ( '. 오른쪽 td.drop'). 낙하 할 ({ onDragEnter : 함수 () { $ (이) .addClass ( '이상'); }, onDragLeave : 함수 () { $ (이) .removeClass ( '이상'); }, onDrop : 기능 (즉, 소스) { $ (이) .removeClass ( '이상'); ( '할당'$ (소스) .hasClass ()) {경우 $ (이)으로 .Append (소스); } 그밖에 { var에 C = $ (소스) .clone () addClass ( '할당'); $ (이) .empty () APPEND (c); c.draggable ({ 복귀 : 사실 }); } } });
사용자가 학교 과목의 왼쪽에 드래그 및 시간표의 셀에 배치 할 때, 위의 코드에서 볼 수 있듯이, onDrop 콜백 함수가 호출됩니다. 우리는 왼쪽에서 드래그 소스 요소를 복제하고 일정 셀에 연결합니다. 학교에 따라 일정에서 다른 셀에 셀을 드래그 할 때, 단순히로 이동합니다.