輕鬆學習jQuery外掛EasyUI EasyUI實現拖曳基本操作

本教學向您展示如何讓 HTML 元素可拖曳，在本例中，我們將建立三個 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();
對於第二個

元素，我們透過建立一個克隆（clone）了原來元素的代理（proxy）讓其可以拖曳。

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

登入後複製

對於第三個

元素，我們透過建立自訂代理程式（proxy）讓其可以拖曳。

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

登入後複製

放置學校科目在時間表單元格上

$('.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創建一個學校課程表，希望對大家的學習有所幫助，大家會喜歡，並且繼續關注小編的下一篇文章。

相關標籤：

easyui jquery 拖曳課程表

來源：php.cn

上一篇：javascript程式設計異常處理實例小結_javascript技巧下一篇：Bootstrap每天必學之js插件_javascript技巧

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章