jquery監聽事件on寫法以及簡單的拖拽效果

引子——關於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'); }