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 Div中加载其他页面的实现代码
Feb 27 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
详解Angular2响应式表单
Jun 14 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
vue 实现element-ui中的加载中状态
Nov 11 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
JavaScript触发器详解
2007/03/10 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Django中的forms组件实例详解
2018/11/08 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python监控nginx端口和进程状态
2019/09/06 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
如何学习Python time模块
2020/06/03 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
公司年会抽奖活动主持词
2014/03/31 职场文书
国旗下的演讲稿
2014/05/08 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis