jquery监听事件on写法以及简单的拖拽效果

侠岚之弋痕夕 侠岚之弋痕夕     2022-08-02     348

关键词:

引子——关于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‘); }

 

基于h5实现的react拖拽排序组件(代码片段)

...现移入效果onDragLeavea拖到b,离开b的时候触发,可以用于监听消除移入效果的时机onDrop当控件被“释放”到一个有效的释放目标位置时触发,我 查看详情

原生拖拽,拖放事件(draganddrop)

...拖拽目标.设置属性draggable="true"实现元素的可拖拽.  2.监听dragstart设置拖拽数据  3.为拖拽操作设置反馈图标(可选)  4.设置允许的拖放效果,如copy,move,link  5.设置拖放目标,默认情况下浏览器阻止所有的拖放操作,所以需要... 查看详情

javascript实现最简单的拖拽效果

一、一些无关痛痒的唠叨拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义。例如:①浏览器标签顺序的拖拽切换现在基本上所有的选项卡式的浏览器都有顺序拖拽切换的功能... 查看详情

4,简单的拖拽效果

classMainextendsegret.DisplayObjectContainer{/***入口文件,最先执行的构造方法*这会实例化一个和手机屏幕一样大的舞台*/publicconstructor(){super();this.once(egret.Event.ADDED_TO_STAGE,this.begin,this);}/***入口文件加载成功后执行的方法*也是逻辑的开始,... 查看详情

pyqt5学习记录---监听鼠标拖拽事件实现mac上百度云盘拖拽效果(代码片段)

...显示边框蓝色非常醒目的提醒了操作者。本文介绍用PyQt5监听鼠标的拖拽事件,实现一个类似的效果,当拖拽时动态的改变整个界面边框颜色.下面先上源码,共两个文件。一个是入口的main.py文件,一个是自己写的... 查看详情

jquery事件以及监听动态节点事件

动态节点事件$("#addPopuForm").on("click",‘.del-card‘,function()$(this).parent().remove();); 事件focus获取焦点事件blur失去焦点事件hover鼠标悬停事件mouseleave鼠标移出事件 监听input值改变事件$(‘#input‘).bind(‘inputpropertychange‘, 查看详情

jquery绑定事件on()方法

参考技术Aevents:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin"。selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素... 查看详情

pyqt5学习记录---监听鼠标拖拽事件实现mac上百度云盘拖拽效果(代码片段)

...显示边框蓝色非常醒目的提醒了操作者。本文介绍用PyQt5监听鼠标的拖拽事件,实现一个类似的效果,当拖拽时动态的改变整个界面边框颜色.下面先上源码,共两个文件。一个是入口的main.py文件,一个是自己写的... 查看详情

ui组件之浮出层的拖拽

...之浮出层这次的这篇总结主要是参考的这篇文章:js拖拽事件实例,不过自己多做了一点分析这次来总结一下浮出层的拖拽,期间遇到了一些小问题,不过最后也解决了,这里也总结一下。首先,我们要实现的效果是浮出层在鼠... 查看详情

jquery的on()监听方法使用

参考技术Ajquery.on()超级方法归纳在jquery的on方法中实现事件委托就更简单了,on方法可以接受三个参数:第一个参数是事件名,可以只绑定一个事件,如on(\'click\'),也可以绑定多个事件,如on(\'clickdbclickmouseover\')等第二个参数是可... 查看详情

jquery实现行列的单向固定和列的拖拽

其实这些功能在PL/SQLDev中都有实现,在页面中还是蛮常见的。我实现列的单向固定的原理:将需要单向固定的列放在一个<table>标签中,而整体的数据放在另一个<table>标签中。列的拖拽:使用onstartdrag、ondragover、drop事件... 查看详情

js简易拖拽效果

原理:注册mousemove事件,使元素跟随鼠标挪动;注册mouseup事件,移除mousemove事件,使得松开鼠标时元素不再跟随移动,能够固定在指定位置。在mousedown事件中注册mousemove事件和mouseup事件,这样便可完成一次完整的拖拽。 重... 查看详情

h5的拖放事件(拖拽删除)

 今天我们来介绍一下h5的拖放事件:拖放事件H5的拖放事件提供了多个接口:1、drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上2、dragend:当拖动操作结束时触发(通过释放鼠标按钮... 查看详情

鼠标事件-拖拽5(带虚线框的拖拽)

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <style> #div2{ width:150px; height:150px; position:absolute; background:#CC 查看详情

简单实现svg的拖拽和缩放

...过程,鼠标按下---->鼠标移动------>松开鼠标。对应的事件分别是mousedown、mousemove、mouseup,先定义两个全局变量鼠标按下事件鼠标移动事件最后放开鼠标一个问题,毋庸置疑这三个事件都注册在svg元素(或者与svg等大的父元... 查看详情

js实现鼠标的拖拽效果

拖拽效果在我们上网的过程中是很常见的,大家都应该在电脑上面登陆过qq吧,当这个qq的登陆框弹出来的时候,我们是可以进行拖动的。这就是一个拖拽效果这是我在慕课网上面看到的,我直接拿过来了,地址http://www.imooc.com/le... 查看详情

screentoviewportpoint,worldtoviewportpoint,viewporttoworldpoint的运用,实现一个简单的对三维中物体的拖拽移动效果

...,然后下来仔细研究了一下,感觉还是挺有收获的。  简单说一下,我们在Unity中屏幕坐标是以坐下为原点,向两边延伸,右上为终点,假定现在我们的分辨率是1920x1080的 查看详情

事件捕获、事件冒泡和 jQuery.on()

】事件捕获、事件冒泡和jQuery.on()【英文标题】:EventCapturing,EventBubblingandjQuery.on()【发布时间】:2014-03-0723:56:55【问题描述】:我有一个关于事件捕获、冒泡和jQuery.on()的有趣问题。我最近更多地了解了事件捕获和事件冒泡之间... 查看详情