本教程向您展示如何使 HTML 元素可拖動，在本例中，我們將創建三個 DIV 元素然后啟用他們的拖動和放置。
首先，我們創建三個<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> 元素，我們通過創建一個克隆（clone）了原來元素的代理（proxy）讓其可以拖動。
$('#dd2').draggable({ proxy:'clone'});對于第三個<div> 元素，我們通過創建自定義代理（proxy）讓其可以拖動。
$('#dd3').draggable({ proxy:function(source){ var p = $('<div class="proxy">proxy</div>'); p.appendTo('body'); return p; }});下面為大家分享學校課程表簡單實例，歡迎大家學習：
我們將創建兩個表格：在左側顯示學校科目，在右側顯示時間表。 您可以拖動學校科目并放置到時間表單元格上。 學校科目是一個 <div class="item"> 元素，時間表單元格是一個 <td class="drop"> 元素。
顯示學校科目
<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創建一個學校課程表，希望對大家的學習有所幫助，大家會喜歡，并且繼續關注小編的下一篇文章。
新聞熱點
疑難解答
