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 相关文章推荐
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
JS轮播图的实现方法
Aug 24 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
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
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python写的一个文本编辑器
2014/01/23 Python
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
房地产销售计划书
2014/01/10 职场文书
刊首寄语大全
2014/04/11 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
优化Mysql查询的示例
2022/04/26 MySQL