JQuery UI的拖放管理组件

深圳市华强职业技术学校 陈少燕

JQuery UI的拖放管理组件

深圳市华强职业技术学校 陈少燕

JQuery UI使开发丰富而高效的用户界面变得不再困难，它提供了一系列组件，可以快速简便的使用，而只需要极少的配置。

JQuery UI；组件管理；编程

对于访问者来说，交互助手组件使得页面中所使用的元素具有更富吸引力的外观和更好的交互性。拖动与投放，是两种相互演化的行为，其中一个发生时，另一个总是关闭。能够在web页面中拖动元素是不错的体验，但是如果没有地方容纳被拖动的元素，那么这种使用方式是毫无意义的。那么在本文中，将重点讲解JQuery UI的投放组件。

它为拖动元素提供了可投放的地点，并且在将拖动元素投放到该区域时，触发某种操作。它就是投放组件。

droppable()用来管理HTML页面上放置被移动项的元素。

1 简单看下拖放组件和投放组件的完美结合

例子1：拖动红色方框透明度减低，当拖动红色方框到白色方框时，弹框提醒“红色方框已进入”；当红色方框没有进入白色方框，红色方框在拖动结束时返回开始位置

提示：

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

(2)revert:影响一次拖动之后是否回归到原始位置

(3)drop()这个事件会在一个允许的draggable对象填充进这个droppable对象时触发. drop:function(){event,ui}

具体实现：

(1)加载以下脚本到1.html

(2)1.html代码如下

---

请放置在这里:

(3)1.js代码如下

$(function(){$(“#div1”).draggable({opacity:0.35//被拖动时的透明度 } );$(“#div2”).droppable({ drop: function (event, ui) {alert(“div1被拖进来了！”); } });})

2 拓展1：真正给“红色方框安个家”

要求：观察红色方框什么时候才算投放成功？当投放成功之后，红色方框的透明度应该更改为1，同时限定红色方框不能被拖动更不能重新返回到其原始位置。

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

(1)Ui.draggable:为被移动的红色方框也可用div1指代

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

a.pointer:必须在鼠标指针接触到投放对象边界时才会认为完成投放

b.touch:只要拖动对象的边缘与投放对象的边缘相接触就会认为完成投放

c.intersect：至少25%的拖动对象进入投放对象边界之内时才会认为完成投放

d.fit:只有拖动对象完成处于投放对象的边界之内时才会完成投放

(3)disable:禁止拖动对象被拖动

(4)revert:设置元素是否在被放置时返回其原始位置。设置为true时，元素返回原始位置。设置为false时，将停留在被放置处。设置为valid时，如果元素被正确放置在能够接纳它的元素上，元素会返回。而设置invalid时，则刚好相反，当其被放置在不能接纳它的元素上时才会返回。

3 js代码更改

$(“#div1”).draggable({ revert: invalid//设置为invalid,opacity: 0.35 //被拖动时的透明度 });$(“#div2”).droppable({ //更改投放成功的判断标准为：拖动对象完全处于投放对象的边界之内tolerance:”f t”,//投放成功触发三个动作drop: function (event, ui) {$(ui.draggable).draggable (“disable”); //红色方框不可被拖动$(ui.draggable).css({ opacity: 1 ,revert: valid});//更改红色方框的透明度为1，同时限定红色方框不能再返回alert(“div1被拖进来了！”);//弹框显示 }});})。