先说说需求吧,网页内又上下两个区域,需要做到的功能是,第一个区域A底部的边可以进行拖拽使得区域变大或变小,同时第二个区域B跟着拖动的变化进行自适应。

思路:

1、使用一个假的div定义为那条可进行拖拽的线。需要设定一个变动的高度,因为可拖动的线也需要根据拖动区域的改变而改变。

2、定义好鼠标触发事件,事件主要分为三个部分:鼠标移动、鼠标抬起和鼠标按下。

事件的内容很简单,就是返回拖拽的高度变化top即可。

3、对刚才定义好假的拖拽线进行事件绑定。根据自己的需求和获取到的高度来设计A、B两个区域需要改变的高度即可。

注意事件:鼠标移动中的事件,通过设置定时加入到异步队列中可以优化性能,是的拖拽过程更加流畅。

前端js区域上下拖拽的更多相关文章

  1. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  2. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  3. angular-dragon-drop.js 双向数据绑定拖拽的功能

    在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新. 刚好找到angular-dragon-drop.js ...

  4. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  5. js插件-简单拖拽

    前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话 ...

  6. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  7. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  8. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

  9. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

随机推荐

  1. 如何打开iPhone 中的heic格式照片

    苹果手机拍出来的heic照片相比常见的格式占存更小,但是在安卓和电脑上这种格式无法直接查看,那怎么在电脑上查看呢,需要将其转换格式就可以查看,关于如何打开iPhone 中的heic格式照片,下面即将为 ...

  2. 轨迹系列7——Socket总结及实现基于TCP或UDP的809协议方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在上一篇博客中我详细介绍了809协议的内容.809协议规范了通 ...

  3. 安卓开发:UI组件-布局管理器和文本显示

    接下来的随笔,记录了在学习b站up主:天哥在奔跑,录制的教学视频的同时,进行一个app开发. up主:天哥在奔跑 视频地址:https://www.bilibili.com/video/av38409 ...

  4. UE3中的时间

    为了管理时间,Unreal将游戏运行时间片分隔为"Ticks".一个Tick是关卡中所有Actors更新的最小时间单位.一个tick一般是10ms-100ms(CPU性能越好,游戏 ...

  5. iOS MVVM架构总结

    为什么使用MVVM iOS中,我们使用的大部分都是MVC架构.虽然MVC的层次明确,但是由于功能日益的增加.代码的维护,使得更多的代码被写在了Controller中,这样Controller就显得非常 ...

  6. 英语词性系列-B02-动词

    诗Poem 要求:背诵这首诗,翻译现代文,根据现代文用简单的英文翻译. 动词直观体会 动词 动词 动词 动词 动词 sell卖 buy买 beat击打 look看 dance跳舞 sing唱歌 spe ...

  7. sbt安裝與配置

    官方下載地址:https://www.scala-sbt.org/download.html?spm=a2c4e.11153940.blogcont238365.9.42d147e0iF8dhv 解压 ...

  8. DeveloperGuide Hive UDF

    Creating Custom UDFs First, you need to create a new class that extends UDF, with one or more method ...

  9. Hadoop Yarn配置项 yarn.nodemanager.resource.local-dirs探讨

    1. What is the recommended value for "yarn.nodemanager.resource.local-dirs"? We only have ...

  10. Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法 Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法

    Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法 Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法 1. 卸载IE9( 装了Win7 64位后,默认 ...