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 相关文章推荐
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
js实现简单数字变动效果
Nov 06 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 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
德劲1103的维修打理经验
2021/03/02 无线电
PHP学习之正则表达式
2011/04/17 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP缓冲区用法总结
2016/02/14 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
php函数式编程简单示例
2019/08/08 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python技能之数据导出excel的实例代码
2017/08/11 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
Python tcp传输代码实例解析
2020/03/18 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python3将变量输入的简单实例
2020/08/19 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
高中生校园生活自我评价
2013/09/19 职场文书
全民健身日活动方案
2014/01/29 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
暑期培训班招生方案
2014/08/26 职场文书
天坛导游词
2015/02/02 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS