js拖拽案例、自定义滚动条
简单实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
.nav{
height:30px;
background: #036663;
border-bottom:1px solid #369;
line-height: 30px;
padding-left:30px;
}
.nav a {
color:#fff;
text-align: center;
font-size:14px;
text-decoration: none; }
.d-box{
width:400px;
height:300px;
border:5px solid #eee;
box-shadow:2px 2px 2px 2px #666;
position: absolute;
top:50%;
left:50%;
margin-top: -155px;
margin-left:-205px; }
.hd{
width:100%;
height:25px;
background-color: #7c9299;
border-bottom:1px solid #369;
line-height: 25px;
color:white;
cursor: move;
}
#box_close{
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<a href="javascript:;" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
<div class="hd" id="drop">注册信息 (可以拖拽)
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
</body>
</html>
<script>
var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
startDrop(drop,box); // 鼠标放到 drop 但是移动 是 box
function startDrop(current,move) {
current.onmousedown = function(event) {
var event = event || window.event;
var x = event.clientX - move.offsetLeft - 205; // 记录当前盒子的x 位置
var y = event.clientY - move.offsetTop - 155; // // 记录当前盒子的y位置
document.onmousemove = function(event) {
var event = event || window.event;
move.style.left = event.clientX - x + "px";
move.style.top = event.clientY - y + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
} }
document.onmouseup = function() { // 鼠标弹起之后， 鼠标继续移动不应该操作
document.onmousemove = null;
}
}
</script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 500px;
border: 1px solid red;
margin:100px;
position: relative;
}
.content {
height: auto;
padding: 5px 18px 5px 5px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.bar {
width: 100%;
height: 100px;
background-color: red;
cursor: pointer;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content">
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分 </div>
<div class="scroll">
<div class="bar"></div>
</div>
</div>
</body>
</html>
<script>
var box = document.getElementById("box"); // 最大的盒子
var content = box.children[0]; // 内容盒子
var scroll = box.children[1]; // 右边盒子
var bar = scroll.children[0];
// 1. 首先先要计算红色滚动条的高度 内容越多，滚动条越短 反之 反之
// 滚动条的长度计算公式: 容器的高度 / 内容的高度 * 容器的高度
// box 是 内容盒子一半 那么红色盒子也要是box盒子的一半
var barHeight = box.offsetHeight / content.offsetHeight * box.offsetHeight;
bar.style.height = barHeight + "px";
// 下面开始 拖动 红色盒子
startScroll(bar,content); // 第一次参数 拖动的 第二个参数 内容的盒子
function startScroll(obj,target) {
obj.onmousedown = function(event) {
// alert(11);
var event = event || window.event;
var t = event.clientY - this.offsetTop ; // 红色盒子距离 父亲 盒子顶部距离
var that = this; // 把 bar 对象给 that 对象
document.onmousemove = function(event) {
var event = event || window.event;
var barTop = event.clientY - t ; // 红色移动的距离
//内容盒子要移动距离
// （内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值
var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) * barTop;
// 内容盒子移动的距离
if(barTop < 0)
{
barTop = 0;
}
else if(barTop > target.parentNode.offsetHeight - that.offsetHeight)
// 大于 大盒子的高度 - 红色盒子的高度
{
barTop = target.parentNode.offsetHeight - that.offsetHeight ;
}
else
{
target.style.top = -contentTop + "px"; // 往上走是负值
}
that.style.top = barTop + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动滑块的时候， 选中文字
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
</script>
js拖拽案例、自定义滚动条的更多相关文章
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- 关于 JS 拖拽功能的冲突问题及解决方法
前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...
- sortable.js 拖拽排序及配置项说明
// 拖动排序 $(function() { /*排序*/ //排序 // Simple list ]; new Sortable(list, { group: "name", a ...
- 浅谈js拖拽
本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js拖拽分析
js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...
随机推荐
- qt5.11.2+vs2017环境下opencv3.4.1编译配置
OpenCV是一个开源的计算机库,它可以帮助视觉工作者做很多富有创造性的工作,在图像处理领域扮演着重要的角色.由于opencv3.x的存在,不管你是学生还是研究人员,是专家还是初学者,都可以快速的建立 ...
- Ubuntu 16.04 安装垃圾清理工具 BleachBit
BleachBit 可以清理系统缓存文件, 清理磁盘垃圾. 首先下载最新版 deb安装包,默认下载到Downloads 中, 下载链接: https://www.bleachbit.org/downl ...
- Java基础系列--05_面向对象
1.概述: (1)面向过程:将问题一步一步的解决的过程(详细步骤),在C语言中所有的代码都是基于过程化的代码. (2)面向对象:面向对象是基于面向过程的编程思想,所有的事情都交由创建出来的对象去指挥. ...
- 04 前端篇（JQuery）
jquery: http://www.cnblogs.com/yuanchenqi/articles/5663118.html 优点:简洁.兼容 jquery 对象: jQuery 或 $ 基本 ...
- 【原创】平时的你VS面试的你
引言 大家在面试的时候,特别是最后一面HR面,是不是经常都说自己咳咳咳.博主特意总结了一下平时的你和面试的你区别在哪,整理成文,大家看看就好~ 正文 面对HR 问题:你是如何和你同事相处的? 平时的你 ...
- 我用Python爬取了李沧最近一年多的二手房成交数据得出以下结论
前言 去年年底,博主有购房的意愿,本来是打算在青岛市北购房,怎奈工作变动,意向转移到了李沧,坐等了半年以后,最终选择在红岛附近购置了期房. 也许一些知道青岛红岛的小伙伴会问我,为什么会跑到那鸟不拉屎的 ...
- html语义化标签
1. HTML语义化的理解 根据内容的结构化,选择合适的标签,便于开发出读者阅读.写出更优雅的代码,让浏览器的爬虫和机器很好地解析. 好处: (1). 为了在没有css时,也可以很好地呈现出内容结构, ...
- 云计算openstack介绍
一.云计算的前世今生 所有的新事物都不是突然冒出来的,都有前世和今生.云计算也是IT技术不断发展的产物. 要理解云计算,需要对IT系统架构的发展过程有所认识. 请看下 IT系统架构的发展到目前为止大致 ...
- mysql 在线加索引 锁表
mysql在线修改表结构大数据表的风险与解决办法归纳 - 王滔 - 博客园 http://www.cnblogs.com/wangtao_20/p/3504395.html MySQL 加索引 加字段 ...
- Supervisor安装与使用
一.简介 1.supervisor是什么 superviosr是一个Linux/Unix系统上进程监控和管理的工具,它由python编写,可以用pip安装.supervisor能将一个普通的命令行进程 ...