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

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

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

本教程向您展示如何使 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;
 }
});

下面為大家分享學校課程表簡單實例,歡迎大家學習:

 我們將創(chuàng)建兩個表格:在左側顯示學??颇浚谟覀蕊@示時間表。 您可以拖動學??颇坎⒎胖玫綍r間表單元格上。 學校科目是一個 <div class="item"> 元素,時間表單元格是一個 <td class="drop"> 元素。

顯示學??颇?/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>

拖動在左側的學校科目

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

放置學??颇吭跁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
  });
 }
 }
});

正如您所看到的上面的代碼,當用戶拖動在左側的學??颇坎⒎胖玫綍r間表單元格中時,onDrop 回調函數將被調用。我們克隆從左側拖動的源元素并把它附加到時間表單元格上。 當把學??颇繌臅r間表的某個單元格拖動到其他單元格,只需簡單地移動它即可。

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

相關文章

最新評論