JQuery UI的拖放管理組件

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

JQuery UI的拖放管理組件

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

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

JQuery UI；組件管理；編程

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

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

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

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

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

提示：

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

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

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

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

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

(2)1.html代碼如下

請放置在這里:

(3)1.js代碼如下

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

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

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

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

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

(2)tolerance:指示拖動(dòng)對(duì)象是否已完成投放

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

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

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

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

(3)disable:禁止拖動(dòng)對(duì)象被拖動(dòng)

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

3 js代碼更改

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