jQuery 플러그인 EasyUI 쉽게 배우기 EasyUI는 기본 드래그 작업을 구현합니다_jquery

이 튜토리얼에서는 HTML 요소를 드래그 가능하게 만드는 방법을 보여줍니다. 이 경우 세 개의 DIV 요소를 만든 다음 드래그 및 배치를 활성화하겠습니다.

먼저 세 개의 dc6dce4a544fdca2df29d5ac0ea9906b 요소를 만듭니다.

<div id="dd1" class="dd-demo"></div>
<div id="dd2" class="dd-demo"></div>
<div id="dd3" class="dd-demo"></div>

첫 번째 >div< 요소는 기본적으로 드래그 가능하게 설정되어 있습니다.
$('#dd1').draggable();
두 번째 dc6dce4a544fdca2df29d5ac0ea9906b 요소의 경우 원본 요소를 복제하는 프록시를 생성하여 드래그 가능하게 만듭니다.

$('#dd2').draggable({
 proxy:'clone'
});

세 번째 dc6dce4a544fdca2df29d5ac0ea9906b 요소의 경우 사용자 정의 프록시를 생성하여 드래그 가능하게 만듭니다.

$('#dd3').draggable({
 proxy:function(source){
 var p = $('<div class="proxy">proxy</div>');
 p.appendTo('body');
 return p;
 }
});

다음은 학교 커리큘럼의 간단한 예입니다. 누구나 학습할 수 있습니다.

두 개의 테이블을 생성합니다. 하나는 왼쪽에 학교 과목을 표시하고 오른쪽에 시간표를 표시합니다. 학교 과목을 시간표 셀에 끌어서 놓을 수 있습니다. 학교 과목은 e60d1b54bf999ac9e3299a277954b392 요소이고 시간표 셀은 4aa9d01e03735a4fb2ceea8133ac1fc2

학교과목 표시

<div class="left">
 <table>
 <tr>
  <td><div class="item">English</div></td>
 </tr>
 <tr>
  <td><div class="item">Science</div></td>
 </tr>
 <!-- other subjects -->
 </table>
</div>

공연일정

<div class="right">
 <table>
 <tr>
  <td class="blank"></td>
  <td class="title">Monday</td>
  <td class="title">Tuesday</td>
  <td class="title">Wednesday</td>
  <td class="title">Thursday</td>
  <td class="title">Friday</td>
 </tr>
 <tr>
  <td class="time">08:00</td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
 </tr>
 <!-- other cells -->
 </table>
</div>

학교과목을 왼쪽으로 드래그하세요

$('.left .item').draggable({
 revert:true,
 proxy:'clone'
});

시간표 셀에 학교 과목 배치

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

위 코드에서 볼 수 있듯이 사용자가 왼쪽의 학교 과목을 드래그하여 시간표 셀에 드롭하면 onDrop 콜백 함수가 호출됩니다. 왼쪽에서 드래그한 소스 요소를 복제하여 일정 셀에 연결합니다. 시간표의 한 셀에서 다른 셀로 학교 과목을 드래그할 때 간단히 이동하세요.

이상은 jQuery EasyUI를 사용하여 학교 커리큘럼을 만드는 방법을 보여 드리는 것입니다. 여러분의 학습에 도움이 되길 바랍니다. 편집자의 다음 기사에도 계속 관심을 가져주세요.