欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實現(xiàn)拖動基本操作

 更新時間：2022年05月06日 14:53:08   投稿：lijiao  
這篇文章主要幫大家輕松學(xué)習(xí)jQuery插件EasyUI，并利用EasyUI實現(xiàn)拖動基本操作，文章并提供了一個學(xué)校課程表簡單實例，感興趣的小伙伴們可以參考一下

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

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

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

對于第一個>div<元素，我們通過默認值讓其可以拖動。

$('#dd1').draggable();

對于第二個 <div> 元素，我們通過創(chuàng)建一個克?。╟lone）了原來元素的代理（proxy）讓其可以拖動。

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

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

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

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

 我們將創(chuàng)建兩個表格：在左側(cè)顯示學(xué)?？颇?，在右側(cè)顯示時間表。 您可以拖動學(xué)?？颇坎⒎胖玫綍r間表單元格上。 學(xué)?？颇渴且粋€ <div class="item"> 元素，時間表單元格是一個 <td class="drop"> 元素。

顯示學(xué)?？颇?/p> 

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

拖動在左側(cè)的學(xué)?？颇?/p> 

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

放置學(xué)?？颇吭跁r間表單元格上

$('.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)用戶拖動在左側(cè)的學(xué)?？颇坎⒎胖玫綍r間表單元格中時，onDrop 回調(diào)函數(shù)將被調(diào)用。我們克隆從左側(cè)拖動的源元素并把它附加到時間表單元格上。 當(dāng)把學(xué)校科目從時間表的某個單元格拖動到其他單元格，只需簡單地移動它即可。

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

相關(guān)文章

最新評論