转载请注明文章来源自http://www.dabaii.com/
一天一个jQuery UI 组件，今天折腾 Interactions 下面的droppable ，这个组件我一直不知道知道用什么中文名来描述它，这个组件的效果是当一个拖拽对象（draggable）拖拽到droppable的时候，droppable 可以发生一系列变化。所以我暂且把droppable 叫做放置对象。他是用来方式拖拽对象。
要使用放置对象，需要应用一下文件： （比昨天说的 拖拽对象多了一个ui.droppable.js）
XML/HTML代码
- <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
- <script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>
- <script type="text/javascript" src="development-bundle/ui/ui.draggable.js"></script>
- <script type="text/javascript" src="development-bundle/ui/ui.droppable.js"></script>
放置对象没有拖拽对象那么多属性：
accept：
放置对象可接受的拖拽对象名字。可以为拖拽对象的ID 标签或者通配符。默认是接受所有拖拽对象。
XML/HTML代码
- //只接受class名字为special'的拖拽对象
- $('.selector').droppable({ accept: '.special' });
- //接受所有对象（默认）
- $('.selector').droppable({ accept: *});
activeClass:
拖拽对象开始被拖拽时（正在进行时），放置对象添加样式变化，拖拽结束或触发hoverClass自动移除这个样式。
hoverClass:
拖拽对象拖拽进行过程中，如果拖拽对象 的x轴或者y轴 有50%(根据tolerance参数来定义的)在放置对象的区域内，那么放置对象就添加这个样式，移除自动释放这个样式。
addClasses:
功能和拖拽对象的addClasses一样。请参阅。
greedy：
翻译是防止传递参数，具体没弄明白。
tolerance:
定义拖拽对象于放置对象发生交集的面积为多少时，才出发放置成功事件。
XML/HTML代码
- $('.selector').droppable({ tolerance: 'fit' });
- //参数为字符串。
- //fit: 拖拽对象全部放在放置对象里面
- //intersect: 默认值， 拖拽对象x轴或者y轴有50%在放置区
- //pointer: 鼠标指针在房子区域
- //touch: 拖拽对象和放置对象发生接触的时候。
事件：
JavaScript代码
- $("#droppable").droppable({
- //开始拖拽事件时触发（鼠标点击(没松开)但是没拖动不会触发）
- activate: function(event, ui) { $(this).addClass('ui-state-highlight').find('p').html('a'); },
- //结束拖拽事件时触发（鼠标释放）
- deactivate: function(event, ui) { $(this).addClass('ui-state-highlight').find('p').html('b');},
- //拖拽至放置对象并且触发放置成功（更具tolerance判断放置条件）时触发
- over: function(event, ui) { $(this).addClass('ui-state-highlight').find('p').html('c');},
- //从放置成功区域移动到放置失效区域时触发的事件。
- out: function(event, ui) { $(this).addClass('ui-state-highlight').find('p').html('d');},
- //在放置成功区域结束拖拽事件时触发。 貌似在有deactivate事件存在的情况下，drop是不会被触发的
- drop: function(event, ui) { $(this).addClass('ui-state-highlight').find('p').html('e'); }
- });
方法不说了，比较容易理解。
#1
