JavaScript实现的简单拖拽效果


Posted in Javascript onJune 01, 2015

本文实例讲述了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">3water拖拽测试</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程序设计有所帮助。

Javascript 相关文章推荐
javascript 四则运算精度修正函数代码
May 31 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
js初始化验证实例详解
Nov 26 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
js实现点击烟花特效
Oct 14 Javascript
一看就懂:jsonp详解
Jun 01 #Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 #Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 #Javascript
window.onload与$(document).ready()的区别分析
May 30 #Javascript
JQuery给网页更换皮肤的方法
May 30 #Javascript
jQuery实现给页面换肤的方法
May 30 #Javascript
js获取滚动距离的方法
May 30 #Javascript
You might like
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
php简单判断文本编码的方法
2015/07/30 PHP
php实现数据库的增删改查
2017/02/26 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python基础教程之异常详解
2019/01/10 Python
python添加菜单图文讲解
2019/06/04 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
党员“一帮一”活动总结
2015/05/07 职场文书
污水处理保证书
2015/05/09 职场文书
小学生手册家长意见
2015/06/03 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
box-shadow单边阴影的实现
2023/05/21 HTML / CSS