使用JS制作一个鼠标可拖的DIV(一)——鼠标拖动
使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件:
1.鼠标按下:DIV元素的onmousedown。
2.鼠标按住拖动:document 的 onmousemove 元素。
3.鼠标放开:document 的 onmouseup 元素。
一、思路
1.当使用点击要拖动的 DIV 时,要首先计算出鼠标的位置与元素位置的差值:
1.1.X坐标的差值 = 鼠标当前位置的X坐标 - DIV元素的X坐标(即:左偏移量)
1.2.Y坐标的差值 = 鼠标当前位置的Y坐标 - DIV元素的Y坐标(即:上偏移量)
2.绑定 document.onmousemove 事件并改变 DIV 元素的位置。
将 DIV 元素的 position 设置成:absolute。让元素可以改变位置。
DIV 元素的X坐标 = 鼠标当前位置的X坐标 - X坐标的差值
DIV 元素的Y坐标 = 鼠标当前位置的Y坐标 - Y坐标的差值
3.绑定 document.onmouseup 事件。
当鼠标放开的时候,清除绑定 document.onmousemove 事件
二、代码实现
1.Html 代码:
<style>
#Drag {
/*border: 5px solid #C4E3FD;*/
background: #C4E3FD;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
z-index: 2;
}
</style> <div id="Drag" onmousedown="moveBind(this, event)">1</div>
</div>
<br />拖放状态:<span id="idShow">未开始</span>
onmousedown="moveBind(this, event)" 这里是绑定鼠标按下事件,并将当前元素对象与事件信息传入 moveBind 方法里。
2.JS代码
<script> function moveBind(obj, evnt) {
//获得元素坐标。
var left = obj.offsetLeft;
var top = obj.offsetTop;
var width = obj.offsetWidth;
var height = obj.offsetHeight; //计算出鼠标的位置与元素位置的差值。
var cleft = evnt.clientX - left;
var ctop = evnt.clientY - top; document.onmousemove = function (doc) {
//计算出移动后的坐标。
var moveLeft = doc.clientX - cleft;
var moveTop = doc.clientY - ctop; //设置成绝对定位,让元素可以移动。
obj.style.position = "absolute"; //当移动位置在范围内时,元素跟随鼠标移动。
obj.style.left = moveLeft + "px";
obj.style.top = moveTop + "px"; show("idShow", moveLeft, moveTop);
} document.onmouseup = function () {
document.onmousemove = function () { }
};
} </script>
其中:
//获得元素坐标。
var left = obj.offsetLeft;
var top = obj.offsetTop;
var width = obj.offsetWidth;
var height = obj.offsetHeight;
这里分别获得元素的 X 坐标, Y 坐标,宽度,高度。
//计算出鼠标的位置与元素位置的差值。
var cleft = evnt.clientX - left;
var ctop = evnt.clientY - top;
evnt.clientX 和 evnt.clientY 获取到的是鼠标的位置。
然后通过上面的公式计算出差值。
obj.style.left = moveLeft + "px";
这里就是直接修改元素的 X 坐标。
其它的代码都如同上面思路所写的这里就不一一说明了。
使用JS制作一个鼠标可拖的DIV(一)——鼠标拖动的更多相关文章
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- 使用JS制作一个鼠标可拖的DIV(二)——限制区域移动
这次是要对上一篇的内容进行扩展. 由于需要对可拖动的 DIV 进行一个区域范围的限制,所以要给于一个容器,让可拖动的 DIV 元素不能逃出该容器的大小范围. 一.思路 1.在外层增加一个 DIV 容器 ...
- 使用JS制作一个鼠标可拖的DIV(四)——缩放
原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思 ...
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
- three.js 制作一个三维的推箱子游戏
今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
- 用js制作一个计算器
使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...
- 使用JS制作一个鼠标可拖的DIV(三)——移动带图片DIV
当DIV元素里,存在图片元素的时候,会使拖动出现异常. 因为图片元素本身就支持拖动,所以,只要在图片标签加入:draggable='false'. 如下: <div onmousedown=&q ...
- three.js 制作一个简单的圆柱体模型
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - or ...
随机推荐
- iOS Development Learning 13Nov
关注了关东升老师在博客园的iOS开发博客. 在使用能力课堂观看智捷课堂的iOS8开发视频教程.观看到Part1 课时3 Xcode中的iOS工程模板
- 限制波尔兹曼机(Restricted Boltzmann Machines)
能量模型的概念从统计力学中得来,它描述着整个系统的某种状态,系统越有序,系统能量波动越小,趋近于平衡状态,系统越无序,能量波动越大.例如:一个孤立的物体,其内部各处的温度不尽相同,那么热就从温度较高的 ...
- ACM1998
/* 魔方阵,古代又称“纵横图”,是指组成元素为自然数1.2…n的平方的n×n的方阵, 其中每个元素值都不相等,且每行.每列以及主.副对角线上各n个元素之和都相等. 输入一个奇数,实现奇数魔方阵. 附 ...
- 单词计数WordCountApp.class
public class WordCountApp { // 可以指定目录,目录下如果有二级目录的话,是不会执行的,只会执行一级目录. private static final String INPU ...
- Hadoop 2.6.0 POM.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 使用SignalR实现比特币价格实时刷新
ASP.NET SignalR是微软支持的一个运行在 Dot NET 平台上的 HTML Websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重 ...
- 详解 jupyter notebook 集成 spark 环境安装
来自: 代码大湿 代码大湿 1 相关介绍 jupyter notebook是一个Web应用程序,允许你创建和分享,包含活的代码,方程的文件,可视化和解释性文字.用途包括:数据的清洗和转换.数值模拟.统 ...
- TreeMap实现原理
摘要 研究项目底层代码时,发现项目中的数据的缓存用的是TreeMap来实现对数据的缓存管理.本片博文就TreeMap的源码.原理以及用法做一个探究 在用TreeMap之前我们要对TreeMap有个整体 ...
- Java设计模式系列之策略模式
策略模式的定义: 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换,策略模式让算法独立于使用它的客户而独立变化. 策略模式使这些算法在客户端调用它们的时候能够互不影响地变化 ...
- SOP、DIP、PLCC、TQFP、PQFP、TSOP、BGA封装解释
1. SOP封装SOP是英文Small Outline Package的缩写,即小外形封装.SOP封装技术由1968-1969年菲利浦公司开发成功,以后逐渐派生出SOJ(J型引脚小外形封装).TSOP ...