爱站程序员基地很久之前写了一个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）
