jquery实现拖拽以及jquery监听事件的写法

好久以前写了一个jquery3D楼盘在线选择，这么一个插件，插件很简单，由于后期项目中没有实际用到，所以，有些地方不是很完善，后面也懒得再进行修改维护了。最近放到github上面，可是也少有人问津及star。昨天，有个网友问我，这个插件中关于拖拽的一些写法！所以，今天在这里简单的对这个插件及相关知识作一些解释，但愿对广大朋友有帮助！

引子——关于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）