JavaScript实现的简单拖拽效果
更新时间：2015年06月01日 09:22:42 作者：秋风秋雨
这篇文章主要介绍了JavaScript实现的简单拖拽效果,涉及javascript针对鼠标事件与页面样式的操作技巧,需要的朋友可以参考下
本文实例讲述了JavaScript实现的简单拖拽效果。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript拖拽</title>
<style>
.test{
text-align:center;
width:300px;
height:30px;
line-height:30px;
background:#f60;
position:absolute;
}
.test:hover{
cursor:move;
}
</style>
</head>
<body>
<script src="jquery-1.6.2.min.js"></script>
<div class="test">jb51拖拽测试</div>
<br/><br/>
<h1>如果无效请刷新下页面..</h1>
<script>
;$(function(){
var isMove=false;
$(".test").mousedown(function(){isMove=true;}).mouseup(function(){isMove=false;});
$(document).mousemove(function(e){
if(!isMove){return;};
var X=e.clientX-parseInt($(".test").width()/2);
var Y=e.clientY-parseInt($(".test").height()/2);
$(".test").css({"left":X,"top":Y,"cursor":"move"});
});
});
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
console一定是各位前端最熟悉的小伙伴了,有些网站还会在控制台输出一些有意思的东西,下面这篇文章主要给大家介绍了关于前端console用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
这篇文章主要为大家分享了前端面试知识点锦集JavaScript篇，细致的给出了每个js面试知识点的答案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本文主要讲解的是V8的技术，是V8的入门篇，主要目的是了解V8的内部机制，希望对前端，快应用，浏览器，以及nodejs同学有些帮助。这里不涉及到如何编写优秀的前端，只是对JS内部引擎技术的讲解2021-06-06
这篇文章主要介绍了JS实现生成会变大变小的圆环,涉及javascript数学运算及页面样式动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
2010-05-05
最近在使用Cookies加密保存数据的时候，接触到crypto，使用还算简单，在这里记录一下2020-08-08
一个电商的app,商品的展示是必不可少的,联动分类展示是很常见的,下面这篇文章主要给大家介绍了关于uniapp实现左右联动商品分类页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
本文主要介绍了前端常见算法的JS实现，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
下面小编就为大家带来一篇js数字舍入误差以及解决方法(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了javascript实现多级联动下拉菜单的方法,通过javascript自定义函数实现对多级联动下拉菜单的操作,是非常实用的技巧,需要的朋友可以参考下2015-02-02
最新评论