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 表单之间的数据传递代码
Dec 04 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
详解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
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
vue观察模式浅析
2018/09/25 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
Python多线程和队列操作实例
2015/06/21 Python
python购物车程序简单代码
2018/04/18 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python 实现批量图片识别并翻译
2020/11/02 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
保密法制宣传月活动总结
2015/05/07 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL