位置: 编程技术 - 正文

javascript实现PC网页里的拖拽效果(运用javascript制作网页)

编辑:rootadmin

推荐整理分享javascript实现PC网页里的拖拽效果(运用javascript制作网页),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:网页javascript void,用javascript写简单网页,javascript网页编程,运用javascript制作网页,运用javascript制作网页,javascript网页编程,用javascript写网页,在网页上运行javascript,内容如对您有帮助,希望把文章链接给更多的朋友!

几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今天做好的一个很好的效果,可能第二天就要推到重来,算了,不说这些了,还是说说我们今天要讲解的案例吧,不知道大家访问过搜房网没有(完全没有做广告之嫌,搜房网,可以给点广告费不),其中有一个功能产品经理特别喜欢,那,就是下面的这个:

这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推掉了,换了另外的一个效果

尽管项目经理不想要这个效果了,但是当时就在我心里留下了一个节,到今天都忘不了这个梗。

好了,这就是我今天想写这篇博客的初衷,希望能给想实现这类拖拽效果,但是不知道该怎么去实现的同学,提供一种思路,不给青春留遗憾,当然实现拖拽的方法有很多,这里就只介绍JavaScript中的一种方法,慢慢体会一下其中的原理!

好了,梗也说完了,开始正题,我们先要明白,拖拽到底是一个什么东西,你也知道,我也知道,但是我还是想来描述一下:

拖拽就是一个容器,你用鼠标可以在页面上拖着到处跑,废话,精确的描述应该是,鼠标移到容器上,然后鼠标按下去,注意要按着不放,然后拖动鼠标,容器能跟着鼠标跑,松开鼠标,容器就停在那里不动了,现实中的例子就是桌子上有一个盒子,我用手放在盒子上,然后移动盒子,手停盒子停,手拿开,盒子不动了,嘻嘻,都懂了哈!

别以为上面说了一堆的废话,我们可以从中得到很多的信息,总结如下就是:

拖拽 = 鼠标按下 + 鼠标移动 + 鼠标弹上

这样就完成了一个拖拽任务,好了,原来这就是拖拽的原理,想实现拖拽,自然实现上面的3个动作,便可以模拟拖拽效果,好,对应JavaScript中的语法就是需要实现这3个动作:

onmousedown , onmousemove , onmouseup

实现的代码就应该是:

为什么后面2个动作要写的里面,好好回味一下,好了,第一步的大概思路就有了,下一步就需要考虑怎么让物体跟着鼠标一起移动,思路大概是这样的:

首先物体是需要决定定位的,因为我们需要操作它的left和top值,才能让它移动,然后就是要考虑鼠标了,鼠标位移,本身就会有一个距离,如果我们知道鼠标移动了多远,然后把这个距离给物体,那物体是不是也和鼠标一样,移动了相同的距离,这不就实现拖拽了吗?哈哈,思路一点点有,感觉萌萌哒~ 现在的问题就是怎么获取鼠标的距离,如果需要深入了解,请复习一下盒子模型,这里我就不说了,很多大神也有相关的博客,我用一张图表示一下:

说明:蓝色框为屏幕宽高,黑色粗框为浏览器可视区宽高(浏览器缩小效果),黑色细框为鼠标要拖拽的对象,如图可知,获取鼠标的坐标,可以用event.clientX,event.clientY来获取,哦了;

计算的大致原理可以参照下图:

javascript实现PC网页里的拖拽效果(运用javascript制作网页)

说明:左边为初始位置,右边为目标位置,原点为鼠标位置,大黑框为浏览器可视宽度,小黑框为拖拽对象,看拖拽对象到目标位置的状态,获取鼠标的最终位置,再减去鼠标距离对象的差值,再赋值给对象的top,left值,也可以获取鼠标的位置差值,再用初始的top,left值加上差值,我们采用第一种,第二种也可以,自己去试一下:

这里说明一下:onmousemove和onmouseup之所以用document对象而不用obj对象,是因为如果用obj对象,鼠标在obj内部还好,如果在obj外面的话,拖拽会很怪异,你也可以改成obj体会一下,最后我们在鼠标弹起的时候将事件都清空;

上面的基本拖拽就算完成了,但是细心的同学一定会问,如果页面上有文字的话,拖拽物体会将文字选中,这效果岂不是怪怪的,没错,这是因为拖拽的时候触发了浏览器的默认选择事件,所以,在拖拽的时候,我们要清除这个默认事件,那怎么清除呢?

下面给一个兼容性写法:

将上面的代码放在onmousedown下,鼠标按下就清除浏览器默认事件,文字就不会被选中了,好了,一个简单的拖拽效果就完成了,当然你现在是看不到效果,之所以不给demo链接是为了让你自己试着写一写,这样印象更深刻,

好了,那问题又来了,到这里就这样完了吗?。。。。。。按本人的风格,当然没有,干货还在后面!

如果我想实现这样一个效果,就是这一个大的容器里面(可以是box,也可以是document),怎么样能让我们的拖拽对象不跑出去呢,换句话说,拖到边缘就拖不动了,耶,是不是很多人想要实现的效果,哈哈,我们看看实现的原理是什么:

现实生活中,一个物体在一个盒子里跑不出去,是因为有堵墙,那我们只要能模拟出这堵墙,就可以把物体框起来,那这堵墙要怎么做呢?我们可以换个思路,当拖拽对象拖到边缘的时候,比如说拖到右边,我们将它的left固定住,是不是就不能再往右了,因为left值不能再加了,那么拖到底部,同理我们将top值固定住,就不能再往下拖了,理解吗?

最终的结果就是如下:

说明:pWidth,pHeight 表示父级元素的宽高(这里是表示相对于父级的宽高限制),oWidth,oHeigt表示拖拽元素的宽高

最后,我将整个拖拽代码整理了一下:

说明:我这里处理的效果是,如果传一个参数,表示相对的对象是window对象,如果传2个参数,第一个是拖拽对象,第二个为相对父级

开篇就说了,搜房网的那个图片拖拽效果是我的一个心结,我写了一个类似的效果,供大家参考,因为自己没有买服务器,所以效果我就不展示了,直接把代码贴出来,供大家参考:

css:

html:

javascript:

效果完全是用的那个封装代码块,引用起来也挺方便,有人会问了,你这用的id获取DOM元素,一个页面只能用一次啊,如果页面多次使用呢,有道理,解决方案之一,那就命名不同的id呗,又不犯法,方案二,获取id的地方改成获取class,但是要注意的是,getElementsByClassName是获取的class集合,需要改写一下,这里我就不写了,有兴趣的同学自行改写一下,好了,到这里真的结束了!

javascript实现数组去重的多种方法 废话不多说,直接拿干货!先说说这个实例的要求:写一个方法实现数组的去重。(要求:执行方法,传递一个数组,返回去重后的新数组,原数组不

使用javascript插入样式 一、用javascript插入style样式有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里

php基于redis处理session的方法 一个基于redis的处理session的方法,如下。phpclassSession_custom{private$redis;//redis实例private$prefix='sess_';//session_id前缀//会话开始时,会执行该方法,连接redis服

标签: 运用javascript制作网页

本文链接地址:https://www.jiuchutong.com/biancheng/377500.html 转载请保留说明!

上一篇:GitHub上一些实用的JavaScript的文件压缩解压缩库推荐(github常用操作)

下一篇:javascript实现数组去重的多种方法(javascript数学函数)

  • 企业所得税更正申报要交滞纳金吗
  • 房产税什么时候落地
  • 年报的资产负债率在哪里
  • 利润表利息费用和利息收入
  • 本期免税额怎么填写
  • 无形资产开发阶段计入什么科目
  • 资产负债表怎么填
  • 可辨认净资产和所有者权益的区别
  • 培训产生的差旅费
  • 企业所得税申报表A类
  • 电子发票读取不出怎么办
  • 个人所得税可以退几年前的?
  • 长期挂账的应付账款如何写申请报告
  • 单位支付给职工的一次性补助金怎么入账
  • 公司对员工的罚款最多可以罚多少
  • 在建工程 费用
  • 成本法下的后续计量
  • 法人代表领工资怎么领
  • 营业外收入是否报增值税
  • 免征企业所得税的有哪些行业
  • 高薪员工如何降职
  • 代开专票作废需要什么资料?
  • 个人汽车租给公司租金需多少钱?
  • 债务重组收益会计处理
  • 怎么分配工业企业材料费用?
  • 工程结算如何进行
  • linux 查看文件内容 转换字符编码
  • 所有者权益变动表范本
  • 补提去年的所得税费用是怎么做分录?
  • 转销坏账准备的会计分录有一个还是两个
  • js中的截取字符串
  • 网络安全网络文明
  • 前端cgi
  • 手把手教大家
  • 商业银行贷款的资本充足率
  • 三方债权债务抵销
  • mongodb skip limit
  • 暂估应付款怎么录入
  • sqlserver 2008数据库事务日志已满怎么处理
  • 分公司撤销跨区经营
  • 通行费发票增值税申报怎么填写
  • MySQL错误什么意思
  • 无形资产摊销年限按法律规定还是企业估计
  • 进项税怎么记账
  • 协作费用
  • 股东以固定资产出资
  • 预支报销怎么做账
  • 用友软件冲销之前凭证怎么操作
  • 公户网银转账操作流程
  • 备用金的支取流程图
  • 高速etc里面的钱怎么取?
  • 丢失了发票怎么处理
  • 建筑企业开具增值税发票
  • 核定征收的小微企业
  • 公账钱怎么取出
  • mysql数据库内存占用高
  • mssql查询语句
  • windows2003密码破解
  • centos清理磁盘空间
  • vmware虚拟机安装Linux教程
  • win7系统安装教程不用u盘
  • xp系统进程
  • macbook内部
  • scm是啥
  • 新手如何入门
  • win7怎么连接手机上网
  • 批处理教程(最全版).pdf免费
  • Python中利用不同Excel表的列匹配
  • 实用的批处理
  • js中的$是什么意思
  • 三消游戏攻略
  • Android Studio --自动删除没有用的资源,给APK减减肥
  • 安卓通用代码
  • jquery编写页面载入事件
  • 河南省政府非税收网站
  • 上海附加税税率2023
  • 人防异地建设费标准
  • 社保申报每月几号申报
  • ipo上市要注意什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设