深圳市華強(qiáng)職業(yè)技術(shù)學(xué)校 陳少燕

JQuery UI的拖放管理組件

深圳市華強(qiáng)職業(yè)技術(shù)學(xué)校 陳少燕

JQuery UI使開發(fā)豐富而高效的用戶界面變得不再困難，它提供了一系列組件，可以快速簡便的使用，而只需要極少的配置。

JQuery UI；組件管理；編程

對于訪問者來說，交互助手組件使得頁面中所使用的元素具有更富吸引力的外觀和更好的交互性。拖動與投放，是兩種相互演化的行為，其中一個發(fā)生時，另一個總是關(guān)閉。能夠在web頁面中拖動元素是不錯的體驗，但是如果沒有地方容納被拖動的元素，那么這種使用方式是毫無意義的。那么在本文中，將重點(diǎn)講解JQuery UI的投放組件。

它為拖動元素提供了可投放的地點(diǎn)，并且在將拖動元素投放到該區(qū)域時，觸發(fā)某種操作。它就是投放組件。

droppable()用來管理HTML頁面上放置被移動項的元素。

1 簡單看下拖放組件和投放組件的完美結(jié)合

例子1：拖動紅色方框透明度減低，當(dāng)拖動紅色方框到白色方框時，彈框提醒“紅色方框已進(jìn)入”；當(dāng)紅色方框沒有進(jìn)入白色方框，紅色方框在拖動結(jié)束時返回開始位置

提示：

(1)opacity:拖動過程中拖動控件的不透明度.

(2)revert:影響一次拖動之后是否回歸到原始位置

(3)drop()這個事件會在一個允許的draggable對象填充進(jìn)這個droppable對象時觸發(fā). drop:function(){event,ui}

具體實(shí)現(xiàn)：

(1)加載以下腳本到1.html

(2)1.html代碼如下

請放置在這里:

(3)1.js代碼如下

$(function(){$(“#div1”).draggable({opacity:0.35//被拖動時的透明度 } );$(“#div2”).droppable({ drop: function (event, ui) {alert(“div1被拖進(jìn)來了！”); } });})

2 拓展1：真正給“紅色方框安個家”

要求：觀察紅色方框什么時候才算投放成功？當(dāng)投放成功之后，紅色方框的透明度應(yīng)該更改為1，同時限定紅色方框不能被拖動更不能重新返回到其原始位置。

提示：紅色方框被拖放到白色方框之后，固定在白色方框中，并且更改其透明度

(1)Ui.draggable:為被移動的紅色方框也可用div1指代

(2)tolerance:指示拖動對象是否已完成投放

a.pointer:必須在鼠標(biāo)指針接觸到投放對象邊界時才會認(rèn)為完成投放

b.touch:只要拖動對象的邊緣與投放對象的邊緣相接觸就會認(rèn)為完成投放

c.intersect：至少25%的拖動對象進(jìn)入投放對象邊界之內(nèi)時才會認(rèn)為完成投放

d.fit:只有拖動對象完成處于投放對象的邊界之內(nèi)時才會完成投放

(3)disable:禁止拖動對象被拖動

(4)revert:設(shè)置元素是否在被放置時返回其原始位置。設(shè)置為true時，元素返回原始位置。設(shè)置為false時，將停留在被放置處。設(shè)置為valid時，如果元素被正確放置在能夠接納它的元素上，元素會返回。而設(shè)置invalid時，則剛好相反，當(dāng)其被放置在不能接納它的元素上時才會返回。

3 js代碼更改

$(“#div1”).draggable({ revert: invalid//設(shè)置為invalid,opacity: 0.35 //被拖動時的透明度 });$(“#div2”).droppable({ //更改投放成功的判斷標(biāo)準(zhǔn)為：拖動對象完全處于投放對象的邊界之內(nèi)tolerance:”f t”,//投放成功觸發(fā)三個動作drop: function (event, ui) {$(ui.draggable).draggable (“disable”); //紅色方框不可被拖動$(ui.draggable).css({ opacity: 1 ,revert: valid});//更改紅色方框的透明度為1，同時限定紅色方框不能再返回alert(“div1被拖進(jìn)來了！”);//彈框顯示 }});})。