注意事项:

1、opacity是全部元素变透明,rgba只是背景色变透明

2、先是注册鼠标按下的事件,此时就需要记录鼠标在盒子中的坐标

3、再在鼠标按下事件中注册鼠标移动事件,此时鼠标的坐标是不断变化的,盒子的坐标就是鼠标的坐标减去鼠标在盒子的坐标

4、top.onmousemove = function (ev) {},top也可以换成document,主要考虑的是鼠标移动的太快出了盒子,改为document可以继续维持这个事件

5、在top.onmousemove中必须取消文本被选中,不然拖拽的时候,如果选中了文字,会出现bug,选中的文字会首先被拖走,影响效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} .box {
width: 200px;
height: 180px;
background-color: #ccc;
position: absolute;
top: 100px;
left: 200px;
} .top {
height: 30px;
text-align: center;
font: 400 15px/30px "simsun";
background-color: pink;
cursor: move;
}
</style>
</head>
<body>
<div class="box">
<div class="top">点击此处拖拽盒子</div>
</div>
<script>
var box = document.getElementsByTagName("div")[0];
var top = box.children[0];
//点击盒子 然后拖拽
//鼠标左键点击事件 鼠标移动事件
top.onmousedown = function (ev) {
ev = ev || window.event;
//1、鼠标的坐标
var pageX = ev.pageX || scroll().left + ev.clientX;
var pageY = ev.pageY || scroll().top + ev.clientY;
//2、鼠标在盒子中的坐标
var x = pageX - box.offsetLeft;
var y = pageY - box.offsetTop;
top.onmousemove = function (ev) {
//3、进入onmousemove事件,鼠标左边不断更新
var pageX = ev.pageX || scroll().left + ev.clientX;
var pageY = ev.pageY || scroll().top + ev.clientY;
ev = ev || window.event;
box.style.left = pageX - x + "px";
box.style.top = pageY - y + "px";
box.style.opacity = 0.4;
//取消文本被选中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
} //解绑
top.onmouseup = function () {
top.onmousemove = null;
box.style.opacity = 1;
} function scroll() {
return {
"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</body>
</html>

JS——拖拽盒子的更多相关文章

  1. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  5. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

  6. JS拖拽div(移动)

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  7. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  8. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  9. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. android在listview中放入从sdcard读取的bitmap

    重写viewbinder public class viewbinder_bookmark implements SimpleAdapter.ViewBinder{ @Override public ...

  2. ubuntu 16.04网卡找不到eth0

    自15版本开始就不叫eth0.可以通过ifconfig进行查看: ifconfig -a 其中enp3s0才是网卡的名称,lo为环路. 参考: http://blog.csdn.net/christn ...

  3. 马悦:《Linux内核分析》MOOC课程

    http://www.cnblogs.com/20135235my/p/5237267.html

  4. linux内核研究-8-块设备I/O层

    http://blog.csdn.net/rill_zhen/article/category/1123087

  5. 时间插件,js格式化,js某月天数,js某月最后一天日期

    //时间格式化 Date.prototype.format = function(fmt) { var o = { "M+": this.getMonth() + 1, //月份 ...

  6. logistic regression教程1

    实现线性拟合 我们用python2.7实现上一篇的推导结果.请先安装python matplotlib包和numpy包. 具体代码如下: #!/usr/bin/env python #! -*- co ...

  7. 日常工作中常见的mysql优化技巧

    1.介绍一下MYSQL经常使用的优化技巧. MySQL 自带 slow log 的分析工具 mysqldumpslow ,可是没有说明.本文通过分析该脚本,介绍了其用法. slow log 是 MyS ...

  8. Linux中grep命令的12个实践例子

    grep是每个Linux发行版都预装的一个强有力的文件模式搜索工具.无论何种原因,如果你的系统没有预装它的话,你可以很容易的通过系统的包管理器来安装它(Debian/Ubuntu系中的apt-get和 ...

  9. kentico9开始移除的webpart

    https://devnet.kentico.com/articles/fighting-featuritis https://blog.intercom.com/product-strategy-m ...

  10. Java —— 正则表达式

    0. 注意 正则表达式里的点号(.),可以匹配除换行符之外的所有字符 Java 语言同其他语言中的正则表达式的不同在于: 对 \(反斜线)的不同处理 \\:其他语言中,表示在正则表达式中插入普通的反斜 ...