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

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

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

本教程向您展示如何使 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<元素，我們通過默認(rèn)值讓其可以拖動(dòng)。

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

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

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

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

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

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

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

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

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

相關(guān)文章

最新評(píng)論