jquery实现拖拽以及jquery监听事件的写法
2016-09-02 13:56
218 查看
很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了。最近放到github上面,但是也少有人问津及star。昨天,有个网友问我,这个插件中关于拖拽的一些写法!因此,今天在这里简单的对这个插件及相关知识做一些解释,希望对广大朋友有帮助!
我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用!
假如用css设置一个属性,我们写法如下:
假如多个属性呢?我们写法如下:
把他们放到一个对象里面!
看了上面的例子,大家能知道我这个插件中关于拖拽楼盘的写法了吗?
我们平时写监听事件on,通常如下写:
其实,我们可以吧click,和function看出2个参数,和上面css的写法类似,那我们也可以如下写啊!
这下大家明白了吧!
我写的这个拖拽效果,应该是代码量比较少的,大家copy下来,应该可以用!
拖拽代码如下:
关于e.pageX,e.pageY及offset().top这些的介绍,我在慕课网录制的jquery宽高介绍中有详细说明!但是去年录制的,现在还没有上线!坑~~~后面有时间出一个专门的介绍吧!
(来源参考:WEB前端 http://www.linzenews.com/program/web/2815.html)
引子——关于jquery的某些写法
我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用!假如用css设置一个属性,我们写法如下:
$("#haorooms").css("width","100px");
假如多个属性呢?我们写法如下:
$(".demo").css({"height":"100px","background-color":"red"});
把他们放到一个对象里面!
看了上面的例子,大家能知道我这个插件中关于拖拽楼盘的写法了吗?
监听事件on写法解释
我们平时写监听事件on,通常如下写:$(".haorooms").on("click",function(){ alert("haorooms前端博客") })
其实,我们可以吧click,和function看出2个参数,和上面css的写法类似,那我们也可以如下写啊!
$(".haorooms").on({ click:function(){ alert("我是点击事件") }, mouseover:function(){ alert("mouseover"); }, mouseout:function(){ alert("out") } })
这下大家明白了吧!
最简单的拖拽效果
我写的这个拖拽效果,应该是代码量比较少的,大家copy下来,应该可以用!拖拽代码如下:
$(".haorooms_drag").on({ mousedown: function(e){ var el=$(this); var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top; $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); }); }, mouseup: function(e){ $(document).off('mousemove.drag'); }
关于e.pageX,e.pageY及offset().top这些的介绍,我在慕课网录制的jquery宽高介绍中有详细说明!但是去年录制的,现在还没有上线!坑~~~后面有时间出一个专门的介绍吧!
(来源参考:WEB前端 http://www.linzenews.com/program/web/2815.html)
相关文章推荐
- jquery实现拖拽以及jquery监听事件的写法
- jquery监听事件on写法以及简单的拖拽效果
- jquery监听事件的另一种写法及最简单的jquery拖拽
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- 事件监听以及事件触发的简单实现流程
- 让input框实现类似百度的搜索提示(基于jquery事件监听)
- Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
- 事件监听以及事件触发的简单实现流程
- Android自定义View之用观察者模式写自定义监听事件以及常用竖直型字母索引栏的写法
- 使用jquery的sortable插件实现拖动效果,以及影响blur事件触发的解决方法
- 使用jquery的sortable插件实现拖动效果,以及影响blur事件触发的解决方法
- 微信小程序 实现拖拽事件监听实例详解
- 让input框实现类似百度的搜索提示(基于jquery事件监听)
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交)
- Android 类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)以及js的select
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- jquery和javascript两种实现浮动窗口的拖拽效果(参照网上资料以及韩顺平老师讲解)
- 事件代理总结: 已经有一些使用主流类库的事件代理示例出现了,比如说jQuery、Prototype以及Yahoo! UI。你也可以找到那些不用任何类库的例子,比如说Usable Type blog上的这一个。一旦需要的话,事件代理将是你工具箱里的一件得心应手的工具,而且它很容易实现。
- Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现