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 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
javascript常用方法总结
May 14 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
浅谈javascript错误处理
Aug 11 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
在js中修改html body的样式
Nov 11 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预定义变量使用帮助(带实例)
2013/10/30 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
浅谈json_encode用法
2015/03/05 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
AngularJS语法详解
2015/01/23 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
js实现页面导航层级指示效果
2020/08/25 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python修改文件内容的3种方法详解
2019/11/15 Python
使用python模拟高斯分布例子
2019/12/09 Python
django框架auth模块用法实例详解
2019/12/10 Python
python连接PostgreSQL过程解析
2020/02/09 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
文明班级建设方案
2014/05/15 职场文书
承诺书格式范文
2014/06/03 职场文书
电教室标语
2014/06/20 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
红高粱观后感
2015/06/10 职场文书