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插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
JS中的BOM应用
Feb 02 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php实现读取内存顺序号
2015/03/29 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
个人自荐材料
2014/05/23 职场文书
企业趣味活动方案
2014/08/21 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2015员工年度考核评语
2015/03/25 职场文书
八月一日观后感
2015/06/10 职场文书
python元组打包和解包过程详解
2021/08/02 Python