js拖拽效果实现
#附图一张，理解拖动原理
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>drag-demo</title>
<style type="text/css">
#one{width: 100px;height: 100px;background: #66CCCC;color:#FFFFFF;}
</style>
<script type="text/javascript">
window.onload=function(){
dragone('one');
};
// 版本一:仅仅只实现拖拽，忽略其他问题
function dragone(domName){
//获取需要拖到元素的dom对象
var dom = document.getElementById(domName);
//当这个dom元素按下的时候
dom.onmousedown=function(e){
/*
浏览器兼容性判断主要是为了兼容ie8，其他的ie7、ie6没测试，不知道
*/
e = e || window.event;
/*
设置该dom元素为绝对定位absolute
只有设置为position:absolute才能实现left(距离页面左边)和top(距离页面顶部)设置，下面有说明
*/
dom.style.position = 'absolute';
/*
e.clientX:获取鼠标按下点的位置在页面上的X（横向即水平）值
这里假如是：e.clientX=10
e.clientY:获取鼠标按下点的位置在页面上的Y（纵向即垂直）值
这里假如是：e.clientY=20
dom.offsetLeft：获取该元素距离页面左边的距离
这里假如是：dom.offsetLeft = 5
dom.offsetTop：获取该元素距离页面顶部的距离
这里假如是：dom.offsetTop = 6
这里如果不理解可以使用画图工具进行理解
diffX:即5 = 10 - 5，计算出的5就是鼠标按下的x点距离该元素内部左边的值
diffY:即14 = 20 - 6，计算出的14就是鼠标按下的y点距离该元素内部顶部的值
*/
var diffX = e.clientX-dom.offsetLeft;
var diffY = e.clientY-dom.offsetTop;
//当元素被点下并在界面上移动的时候
document.onmousemove=function(e){
e = e || window.event;//浏览器兼容
/*
dom.style.left和dom.style.top即距离页面左边、顶部的距离
即用移动后的鼠标按下x，y值-之前按下点的距离内部左边、距离顶部的值
得到的值即是移动后的元素距离页面的x，y的距离，重新赋值一下给dom元素即可
*/
dom.style.left = e.clientX-diffX+'px';//设置移动时left值
dom.style.top = e.clientY-diffY+'px';//设置移动时top值
};
//鼠标松开的时候
document.onmouseup=function(e){
//去除页面移动、松开事件
//去除后该元素下次再次被点击拖动时，这两个事件又会被绑定上的，无需担心
document.onmousemove = null;
document.onmouseup = null;
};
};
}
</script>
</head>
<body>
<div id="one">版本一</div>
</body>
</html>
js拖拽效果实现的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- js拖拽效果的实现及原理
元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离 ...
- js拖拽效果的实现
1.最基础的写法 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...
- js拖拽效果详细讲解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
- js实现本地图片文件拖拽效果
如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
随机推荐
- 萌新笔记——用KMP算法与Trie字典树实现屏蔽敏感词（UTF-8编码）
前几天写好了字典,又刚好重温了KMP算法,恰逢遇到朋友吐槽最近被和谐的词越来越多了,于是突发奇想,想要自己实现一下敏感词屏蔽. 基本敏感词的屏蔽说起来很简单,只要把字符串中的敏感词替换成"* ...
- vsftpd安装配置 530 Permission denied.错误
yum install vsftpd service vsftpd start 530 Permission denied.错误 /etc/vsftpd/user_list 该文件里的用户账户在 ...
- ajax 允许跨域html头设置
"Access-Control-Allow-Origin"= "*" "Access-Control-Allow-Headers"= &qu ...
- maven 详解
Maven是基于项目对象模型(POM)的,可以通过一小段描述信息来管理项目构建,报告和文档的软件项目管理工具,是一种全新的项目构建方式,让我们的开发更加简单,高效.Maven主要做的是两件事: 开发规 ...
- AssetBundle Manager & Example Scenes
https://www.assetstore.unity3d.com/en/#!/content/45836 https://docs.unity3d.com/Manual/AssetBundlesI ...
- JavaSript模块规范 - AMD规范与CMD规范介绍
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
- [LeetCode] Rotate Function 旋转函数
Given an array of integers A and let n to be its length. Assume Bk to be an array obtained by rotati ...
- Nfs+Drdb+Heartbeat 数据存储高可用服务架构方案
一.方案的应用场景 适用于2千万-3千万PV架构的网站,Nfs数据存储高可用服务方案 备注:互联网排名前30左右公司常用的架构 二.生产环境方案部署原理图 三.生产环境服务器硬件配置: 生产环境中采用 ...
- UltralEdit 替换tips
UltralEdit的字符串替换,简直是编辑器的神来之笔! 可以通过 搜索--〉替换 菜单调出,也可以使用 Ctrl+R 快捷键 下面来看字符的表示吧: tab可以直接Tab键(可能不成功,因为被用作 ...
- C#面向对象设计模式纵横谈——1.面向对象设计模式与原则
一:设计模式简介 每一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的解决方案的核心. ---- Christopher Alexander 软件设计领域设计模式: 设计模式描述了软件设计过 ...