輕松學習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ù)關注小編的下一篇文章。
相關文章
為JQuery EasyUI 表單組件增加焦點切換功能的方法
下面小編就為大家?guī)硪黄獮镴Query EasyUI 表單組件增加焦點切換功能的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04學習從實踐開始之jQuery插件開發(fā) 菜單插件開發(fā)
從軟件到網站,菜單可以說是無處不在。在傳統(tǒng)應用軟件開發(fā)中,一般都有現(xiàn)成的控件可以使用;但是在網頁開發(fā)時,基本上要靠開發(fā)人員自己動手設計2012-05-05