JS实现简单拖拽效果


Posted in Javascript onJune 21, 2017

本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#wrap {
position: relative;
border: 1px solid #000;
width: 800px;
height: 500px;
} 
#drog {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
</style>
</head>
<body>
<div id="wrap">
<div id="drog"></div>
</div> 
<script type="text/javascript" src="startmove.js"></script>
<script type="text/javascript">
(function(){
var drog = document.querySelector('#drog');
/*
1.记录按下的时候的鼠标位置
2.记录按下的时候元素的位置 
*/
drog.onmousedown = function(e){
var startElY = css(drog,"top");
var startElX = css(drog,"left");
var startMouseX = e.clientX;
var startMouseY = e.clientY;

/*
求出鼠标移动的距离,
操作元素也移动相应的距离

为了可以一直跟随,所以添加给document
*/
document.onmousemove = function(e){
var nowMouseX = e.clientX;
var nowMouseY = e.clientY;
var disX = nowMouseX - startMouseX;
var disY = nowMouseY - startMouseY;
var x = disX + startElX;
var y = disY + startElY;
css(drog,"left",x);
css(drog,"top",y);
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
})(); 
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
基于openlayers4实现点的扩散效果
Aug 17 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 #Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 #jQuery
详解Node.js access_token的获取、存储及更新
Jun 20 #Javascript
详解angular 中的自定义指令之详解API
Jun 20 #Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 #Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 #Javascript
Vue实现路由跳转和嵌套
Jun 20 #Javascript
You might like
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
python语言使用技巧分享
2016/05/31 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
python实现连连看游戏
2020/02/14 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
会计学个人自荐信模板
2013/12/13 职场文书
快餐公司创业计划书
2014/04/29 职场文书
欢迎标语大全
2014/06/21 职场文书
四风问题查摆材料
2014/08/25 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
小学老师对学生的评语
2014/12/29 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript