【jQuery】放置插件——droppable
2015-12-22 00:28
615 查看
除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:
selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
例如,在页面中,通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中,同时改变“购物车”的背景色和数量值,如下图所示:
在浏览器中显示的效果:
从图中可以看出,先调用draggable插件任意拖曳“产品区”的元素,然后,调用droppable插件绑定“购物车”中接收元素,当“产品区”元素完全拖曳至“购物车”时,触发定义的drop函数,改变“购物车”中背景色和总数量值。
$(selector).droppable({options})
selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
例如,在页面中,通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中,同时改变“购物车”的背景色和数量值,如下图所示:
在浏览器中显示的效果:
从图中可以看出,先调用draggable插件任意拖曳“产品区”的元素,然后,调用droppable插件绑定“购物车”中接收元素,当“产品区”元素完全拖曳至“购物车”时,触发定义的drop函数,改变“购物车”中背景色和总数量值。
相关文章推荐
- jquery插件jquery.confirm弹出确认消息
- jquery获取select选中值的方法分析
- 【jQuery】拖曳插件——draggable
- 基于UEditor的单独图片上传JQuery插件实现
- Writing Your Own jQuery Plugins
- jQuery Moblile Demos学习记录Theming、Button、Icons图标,脑子真的不好使。
- jQuery Moblile Demos学习记录Panel
- jQuery操作json
- Jquery 随便写些知识点
- 你不需要jQuery You Don't Need jQuery
- 20151221jquery学习笔记--验证插件
- 超实用的jQuery代码段 - jQuery Callback()
- Jquery特效之=》仿京东多条件筛选特效
- 20151221jqueryUI---日历UI代码备份
- 20151221jquery学习笔记---日历UI
- jquery extends
- (function($){...})(jQuery) 函数详解
- 【工作日志】0005学习jQuery框架基本语法和JSON的知识
- jQuery的attr与prop,attribute和property区别
- AJAX方法详解