jquery监听事件的另一种写法及最简单的jquery拖拽

3360次浏览

前言

很久之前写了一个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'); }

网上看到有的人,写拖拽效果,写了很多代码,包括我给的js案例中,也有类似拖拽的效果,大家请看:http://www.haorooms.com/uploads/example/jscode_shizhan/index.htm 大家查看第八课,第二节,或者第十课的第五条,面向对象封装了一个拖拽库! 等等 当然,这些是用纯js写的!代码量大一点也正常,但是效率不低哦!大家可以研究一下!

关于e.pageX,e.pageY及offset().top这些的介绍,我在慕课网录制的jquery宽高介绍中有详细说明!但是去年录制的,现在还没有上线!坑~~~后面有时间出一个专门的介绍吧!

新的问题解答

看到上面我写的拖拽中有”mousemove.drag“,有同学会问,”mousemove.drag“这个是什么鸟事件啊?没有见过!那么,我说,你没有见过正常,因为这个是我自己命名的一个,当然也可以叫”mousemove.haorooms“,关于这个,假如你不明白的话,看我之前写的一篇文章:谈谈jquery的事件名称和命名空间 相信你会明白的!

好了,今天的解释就到这里,谢谢大家!对了,最近我建了一个haorooms交流群,群号是:522634865,你也可以进入资源库底部,或者右侧QQ 直接点击,申请加入。我们可以在这里讨论前端技术!谢谢您长期关注haorooms!

Tags: jquery事件

相关文章: