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 当前日期加(天、周、月、年)
Aug 09 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
Javascript浅谈之this
Dec 17 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
微信小程序实现电影App导航和轮播
Nov 30 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
深入分析PHP设计模式
2020/06/15 PHP
javascript 数组的方法集合
2008/06/05 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
python学习 流程控制语句详解
2016/06/01 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
网络书店创业计划书
2014/02/07 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
预备党员考察意见范文
2015/06/01 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL