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 While 循环基础教程
Apr 05 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 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
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Python 如何在字符串中插入变量
2020/08/01 Python
web页面录屏实现
2019/02/12 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
个人租房协议书范本
2014/09/30 职场文书
中学生运动会广播稿
2015/08/19 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang