JS实现简单拖拽效果
更新时间：2017年06月21日 08:36:04 作者：catEatBird
这篇文章主要为大家详细介绍了JS实现拖拽效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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中如何将字符串转换成数字问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了js实现超简单的展开、折叠目录代码,通过javascript操作鼠标点击事件控制页面元素样式的动态改变实现该功能,非常简单实用,需要的朋友可以参考下2015-08-08
headjs其实是一整套的工具，本文介绍的是它其中的Javascript Loader功能。需要的朋友可以参考下2016-11-11
现在微博都有一个不错的效果就是会实时的动态滚动并显示最新的信息了，下面我来给大家介绍仿新浪微博大厅首页滚动效果,希望此方法对大家会有帮助。2015-10-10
下面小编就为大家分享一篇layui表格checkbox选择全选样式及功能的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了BootStrap初学者对弹出框和进度条的使用感觉的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
今天在写页面时用到了ymPrompt的win方法来弹出一个窗口。由于要用到获取子窗口返回来的值判断是否刷新父窗口,在ymPrompt的组件Demo中一直没有找到合适的方法实现2010-06-06
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下2016-04-04
js调用CS里的方法有很多，我用一种简单的方法，如下,有需要的朋友可以参考一下2013-08-08
JavaScript 是一种有趣的语言，我们都喜欢它，因为它的性质。这篇文章主要介绍了8个有意思的JavaScript面试题 ,需要的朋友可以参考下2019-07-07
最新评论