DOM元素拖拽效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:200px;height:200px;background:black;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="div"></div>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev) //鼠标按下DIV
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距就等于disX, 这个disXs是用于确定鼠标移动DIV时鼠标点和DIV之间的左面距离，这个距离是不会变的，通过这个新鼠标的X坐标减去disX就是DIV的Left
disY=oEvent.clientY-oDiv.offsetTop; //鼠标的Y坐标减去DIV的左边距就等于disY, 这个disY是用于确定鼠标移动DIV时鼠标点和DIV之间的上面距离，这个距离是不会变的，通过这个新鼠标的Y坐标减去disY就是DIV的Top
document.onmousemove=function(ev) //为了防止鼠标移动太快而离开了DIV产生了bug，所以要给整个页面加onmousemove事件
{
var oEvent=ev||event;
var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动DIV后的Left
var oTop=oEvent.clientY-disY; //新鼠标Y坐标减去disY,也就是鼠标移动DIV后的Top
if(oLeft<0) //当DIV的Left小于0，也就是移出左边
{
oLeft=0; //就把DIV的Left设置为0，就不能移出左边
}
else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕宽度减去DIV的宽度就得出了DIV到达最右边的宽度，如果Left大于这个像素
{
oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left设置为这个像素
}
if(oTop<0) //当DIV的To小于0，也就是移出左边
{
oTop=0; //就把DIV的Top设置为0，就不能移出上边
}
else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度减去DIV的高度就得出了DIV到达最下面边的像素，如果Top大于这个像素
{
oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top设置为这个像素
}
oDiv.style.left=oLeft+'px'; //DIV的Left设置为新鼠标X坐标减去disX的值
oDiv.style.top=oTop+'px'; //DIV的Top设置为新鼠标Y坐标减去disY的值
};
document.onmouseup=function() //鼠标松开时
{
document.onmousemove=null; //把鼠标移动清楚
document.onmouseup=null; //把鼠标松开清楚
};
return false; //阻止FireFox的默认事件 bug
};
};
</script>
</body>
</html>
DOM元素拖拽效果的更多相关文章
- div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~
产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...
- jQuery的DOM操作实例（2）——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- ExtJS拖拽效果
ExtJS拖拽效果 <html> <head> <title>hello</title> <meta http-equiv="conte ...
- 拖拽系列一、JavaScript实现简单的拖拽效果
前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...
- js实现本地图片文件拖拽效果
如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- JavaScript实现最简单的拖拽效果
一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...
随机推荐
- 【Netty】ChannelHandler和codec
一.前言 前面学习了Netty的codec框架,下面接着学习ChannelHandler与codec之间的关联. 二.ChannelHandler和codec Netty为不同的协议提供了处理器和编解 ...
- MySQL数据库安全策略
1. 删除所有MySQL中的用户(包括root用户): mysql> delete from mysql.user root可以保留,然后修改为其他用户 2. 为管理员root用户设置密码 : ...
- 测序分析软件-phred的安装
1.进入phred官网,给作者写信,获得所需的软件,大约需要两三天的时间即可收到回信. 2.根据作者的指示下载,解压相应软件. 3.以笔者本人的安装为例unbuntu系统(phred自带的instal ...
- JavaScript数组去重方法及测试结果
最近看到一些人的去面试web前端,都说碰到过问JavaScript数组去重的问题,我也学习了一下做下总结. 实际上最有代表性也就三种方法:数组双重循环,对象哈希,排序后去重. 这三种方法我都做了性能测 ...
- 《Python编程从入门到实践》_第六章_字典
一个简单的字典 #用户信息 user = {','city':'shanghai'} print(user['name']) print(user['age']) print(user['city'] ...
- 初学vitmio，vitmio的环境配置及遇到的坑
1 到官网或者github下载vitamio 官网地址:https://www.vitamio.org/ github地址:https://github.com/yixia/VitamioBundle ...
- PHP验证码的制作教程
自己过去自学了PHP绘画验证码的教程,现在就把这一部分笔记跟大家分享,希望可以帮到大家. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云 ...
- AS3批量替换文件
在做项目时,经过会遇到资源替换问题.比如配音公司,提供了一批八九百个配音MP3文件,用到后面却发现有些配音不能正常使用.可能是十几个,也可能是一两百个.只能是配音公司重新提供.因为之前的配音资源,已经 ...
- openvpn配置注意事项
1.安装VPN安装结束后,需要配置CONFIG文件夹服务端及客户端的配置文件,建议从sample文件里直接拷贝修改,网上的一些案例会引起无法启动的问题,没仔细研究过是哪里错了,反正最后从sample里 ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...