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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
three.js 入门案例详解
Jan 23 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 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
Zend Guard一些常见问题解答
2008/09/11 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
Three.js学习之网格
2016/08/10 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
投标承诺书范本
2014/03/27 职场文书
员工安全承诺书
2014/05/22 职场文书
单位委托书怎么写
2014/08/02 职场文书
写景作文评语集锦
2014/12/25 职场文书
2015年妇女工作总结
2015/05/14 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书