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 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 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中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
详解Python编程中time模块的使用
2015/11/20 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Python argparse模块使用方法解析
2020/02/20 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python 列表反转显示的四种方法
2020/11/16 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
生产部主管岗位职责
2014/01/06 职场文书
入党介绍人意见范文
2015/06/01 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python