成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

本教程向您展示如何使 HTML 元素可拖動(dòng)，在本例中，我們將創(chuàng)建三個(gè) DIV 元素然后啟用他們的拖動(dòng)和放置。

首先，我們創(chuàng)建三個(gè)<div> 元素：

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

對(duì)于第一個(gè)>div<元素，我們通過(guò)默認(rèn)值讓其可以拖動(dòng)。
$('#dd1').draggable();
對(duì)于第二個(gè) <div> 元素，我們通過(guò)創(chuàng)建一個(gè)克隆（clone）了原來(lái)元素的代理（proxy）讓其可以拖動(dòng)。

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

對(duì)于第三個(gè)<div> 元素，我們通過(guò)創(chuàng)建自定義代理（proxy）讓其可以拖動(dòng)。

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

下面為大家分享學(xué)校課程表簡(jiǎn)單實(shí)例，歡迎大家學(xué)習(xí)：

我們將創(chuàng)建兩個(gè)表格：在左側(cè)顯示學(xué)校科目，在右側(cè)顯示時(shí)間表。 您可以拖動(dòng)學(xué)校科目并放置到時(shí)間表單元格上。 學(xué)校科目是一個(gè) <div class="item"> 元素，時(shí)間表單元格是一個(gè) <td class="drop"> 元素。

顯示學(xué)校科目

<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>

顯示時(shí)間表

<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>

拖動(dòng)在左側(cè)的學(xué)校科目

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

放置學(xué)校科目在時(shí)間表單元格上

$('.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
  });
 }
 }
});

正如您所看到的上面的代碼，當(dāng)用戶(hù)拖動(dòng)在左側(cè)的學(xué)校科目并放置到時(shí)間表單元格中時(shí)，onDrop 回調(diào)函數(shù)將被調(diào)用。我們克隆從左側(cè)拖動(dòng)的源元素并把它附加到時(shí)間表單元格上。 當(dāng)把學(xué)校科目從時(shí)間表的某個(gè)單元格拖動(dòng)到其他單元格，只需簡(jiǎn)單地移動(dòng)它即可。

以上就是為大家展示的如何使用jQuery EasyUI創(chuàng)建一個(gè)學(xué)校課程表，希望對(duì)大家的學(xué)習(xí)有所幫助，大家會(huì)喜歡，并且繼續(xù)關(guān)注小編的下一篇文章。