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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
document.write的几点使用心得
May 14 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
vue-cli 关闭热更新操作
Sep 18 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常用ODBC函数集(详细)
2013/06/24 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
JavaScript延迟加载
2021/03/09 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
python shell根据ip获取主机名代码示例
2017/11/25 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
社团成立邀请函
2014/01/08 职场文书
房产买卖委托公证书
2014/04/04 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
教师自我剖析材料
2014/09/29 职场文书
2014年店长工作总结
2014/11/17 职场文书
教师个人年终总结
2015/02/11 职场文书
保护校园环境倡议书
2015/04/28 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
MySQL多表查询机制
2022/03/17 MySQL
如何通过一篇文章了解Python中的生成器
2022/04/02 Python