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）