jquery實現拖拽以及jquery監聽事件的寫法

時間 2019-11-15

原文原文鏈接

好久以前寫了一個jquery3D樓盤在線選擇，這麼一個插件，插件很簡單，由於後期項目中沒有實際用到，所以，有些地方不是很完善，後面也懶得再進行修改維護了。最近放到github上面，可是也少有人問津及star。昨天，有個網友問我，這個插件中關於拖拽的一些寫法！所以，今天在這裏簡單的對這個插件及相關知識作一些解釋，但願對廣大朋友有幫助！css

引子——關於jquery的某些寫法

我先不對監聽事件作解釋，咱們先來看下jquery的一些寫法吧！咱們最經常使用的是jquery的css()方法，相信你們都會用！html

假如用css設置一個屬性，咱們寫法以下：前端

$("#haorooms").css("width","100px");

假如多個屬性呢？咱們寫法以下：jquery

$(".demo").css({"height":"100px","background-color":"red"});

把他們放到一個對象裏面！git

看了上面的例子，你們能知道我這個插件中關於拖拽樓盤的寫法了嗎？github

監聽事件on寫法解釋

咱們平時寫監聽事件on，一般以下寫：web

$(".haorooms").on("click",function(){ alert("haorooms前端博客") })

其實，咱們能夠吧click，和function看出2個參數，和上面css的寫法相似，那咱們也能夠以下寫啊！this

$(".haorooms").on({ click:function(){ alert("我是點擊事件") }, mouseover:function(){ alert("mouseover"); }, mouseout:function(){ alert("out") } })

這下你們明白了吧！spa

最簡單的拖拽效果

我寫的這個拖拽效果，應該是代碼量比較少的，你們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'); }