jQuery プラグインを簡単に学ぶ EasyUI EasyUI は基本的なドラッグ操作を実装します

このチュートリアルでは、HTML 要素をドラッグ可能にする方法を説明します。この場合、3 つの DIV 要素を作成し、それらのドラッグと配置を有効にします。

まず、3 つの

要素を作成します。

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

ログイン後にコピー

最初の >div< 要素については、デフォルトでドラッグ可能にします。

$('#dd1').draggable(); 2 番目の

要素については、元の要素のクローンを作成するプロキシを作成することでドラッグ可能にします。

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

ログイン後にコピー

3 番目の

要素については、カスタムプロキシを作成してドラッグ可能にします。

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

ログイン後にコピー

以下は学校のカリキュラムの簡単な例です。誰でも学ぶことができます:

2 つのテーブルを作成します。1 つは左側に学校の科目、右側に時間割を示します。学校の科目を時間割のセルにドラッグアンドドロップできます。学校の科目は

要素であり、timetable セルは要素です。

学校の科目を表示

<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 を使用して学校のカリキュラムを作成する方法を示したものです。皆さんの学習に役立つことを願っています。編集者の次の記事にも注目してください。