使用 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(一)——鼠标拖动的更多相关文章

  1. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  2. 使用JS制作一个鼠标可拖的DIV(二)——限制区域移动

    这次是要对上一篇的内容进行扩展. 由于需要对可拖动的 DIV 进行一个区域范围的限制,所以要给于一个容器,让可拖动的 DIV 元素不能逃出该容器的大小范围. 一.思路 1.在外层增加一个 DIV 容器 ...

  3. 使用JS制作一个鼠标可拖的DIV(四)——缩放

    原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思 ...

  4. 【原创】js实现一个可随意拖拽排序的菜单导航栏

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

  5. three.js 制作一个三维的推箱子游戏

    今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...

  6. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  7. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

  8. 使用JS制作一个鼠标可拖的DIV(三)——移动带图片DIV

    当DIV元素里,存在图片元素的时候,会使拖动出现异常. 因为图片元素本身就支持拖动,所以,只要在图片标签加入:draggable='false'. 如下: <div onmousedown=&q ...

  9. three.js 制作一个简单的圆柱体模型

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - or ...

随机推荐

  1. iOS Development Learning 13Nov

    关注了关东升老师在博客园的iOS开发博客. 在使用能力课堂观看智捷课堂的iOS8开发视频教程.观看到Part1 课时3 Xcode中的iOS工程模板

  2. 限制波尔兹曼机(Restricted Boltzmann Machines)

    能量模型的概念从统计力学中得来,它描述着整个系统的某种状态,系统越有序,系统能量波动越小,趋近于平衡状态,系统越无序,能量波动越大.例如:一个孤立的物体,其内部各处的温度不尽相同,那么热就从温度较高的 ...

  3. ACM1998

    /* 魔方阵,古代又称“纵横图”,是指组成元素为自然数1.2…n的平方的n×n的方阵, 其中每个元素值都不相等,且每行.每列以及主.副对角线上各n个元素之和都相等. 输入一个奇数,实现奇数魔方阵. 附 ...

  4. 单词计数WordCountApp.class

    public class WordCountApp { // 可以指定目录,目录下如果有二级目录的话,是不会执行的,只会执行一级目录. private static final String INPU ...

  5. Hadoop 2.6.0 POM.xml

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  6. 使用SignalR实现比特币价格实时刷新

    ASP.NET SignalR是微软支持的一个运行在 Dot NET 平台上的 HTML Websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重 ...

  7. 详解 jupyter notebook 集成 spark 环境安装

    来自: 代码大湿 代码大湿 1 相关介绍 jupyter notebook是一个Web应用程序,允许你创建和分享,包含活的代码,方程的文件,可视化和解释性文字.用途包括:数据的清洗和转换.数值模拟.统 ...

  8. TreeMap实现原理

    摘要 研究项目底层代码时,发现项目中的数据的缓存用的是TreeMap来实现对数据的缓存管理.本片博文就TreeMap的源码.原理以及用法做一个探究 在用TreeMap之前我们要对TreeMap有个整体 ...

  9. Java设计模式系列之策略模式

    策略模式的定义: 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换,策略模式让算法独立于使用它的客户而独立变化. 策略模式使这些算法在客户端调用它们的时候能够互不影响地变化 ...

  10. SOP、DIP、PLCC、TQFP、PQFP、TSOP、BGA封装解释

    1. SOP封装SOP是英文Small Outline Package的缩写,即小外形封装.SOP封装技术由1968-1969年菲利浦公司开发成功,以后逐渐派生出SOJ(J型引脚小外形封装).TSOP ...