jQuery实现div拖拽效果实例分析


Posted in Javascript onFebruary 20, 2016

本文实例分析了jQuery实现div拖拽效果。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
/*模块拖拽*/
.drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:100px;left:20px;cursor:move;}
</style>
<script type="text/javascript">
// 模块拖拽
$(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
  $(".drag").click(function(){
    //alert("click");//点击(松开后触发)
    }).mousedown(function(e){
    _move=true;
    _x=e.pageX-parseInt($(".drag").css("left"));
    _y=e.pageY-parseInt($(".drag").css("top"));
    $(".drag").fadeTo(20, 0.5);//点击后开始拖动并透明显示
  });
  $(document).mousemove(function(e){
    if(_move){
      var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
      var y=e.pageY-_y;
      $(".drag").css({top:y,left:x});//控件新位置
    }
  }).mouseup(function(){
  _move=false;
  $(".drag").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
 });
});
</script>
</head>
<body>
<!--模块拖拽--> <div class="drag">这个可以拖动哦 ^_^</div>
</body>
</html>
$("#question_pic").bind("click",function(event){
  event.stopPropagation(); //防止冒泡事件响应
  $("#chat_question").hide("slow");
});
$("#chatLineHolder").scrollTop(10000);
//保持最下一行,不用滚

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
js 匿名调用实现代码
Jun 19 Javascript
Javascript 面向对象之重载
May 04 Javascript
jquery tab标签页的制作
May 10 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
jQuery实现简单隔行变色的方法
Feb 20 #Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 #Javascript
jQuery获得字体颜色16位码的方法
Feb 20 #Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 #Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 #Javascript
js面向对象的写法
Feb 19 #Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 #Javascript
You might like
安装APACHE
2007/01/15 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP实现小偷程序实例
2016/10/31 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
python映射列表实例分析
2015/01/26 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python机器学习之神经网络(三)
2017/12/20 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python内存动态分配过程详解
2019/07/15 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
数学教学随笔感言
2014/02/17 职场文书
总经理的岗位职责
2014/02/23 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
话题作文之成长
2019/12/09 职场文书
python实现简易名片管理系统
2021/04/11 Python
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android