1.尼玛, move事件的时候忘了加ev,找了一个多小时

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin: 0; padding: 0}

        #div1{width: 100px; height: 100px; background: red; position: absolute; left: 100px;

            top: 100px;}

    </style>

    <script src="jquery-1.12.3.min.js"></script>

    <script>

        $(function(){

            var disX = 0;

            var disY = 0;

            var $div1 = $("#div1");

            $div1.on('mousedown',function(ev){

                disX = ev.pageX - $(this).offset().left;

                disY = ev.pageY - $(this).offset().top;

                $(document).on('mousemove',function(ev){//此处忘了加ev, 找了一个多小时!

                    var left = ev.pageX - disX;

                    var top = ev.pageY - disY;

                    console.log(left+":"+top)

                    $div1.css('left',left);

                    $div1.css('top',top );

                });

                $(document).on('mouseup',function(){

                    console.log("off")

                    $(this).off();

                });

                return false;//按下的时候阻止默认事件

            })

        });

    </script>

</head>

<body style="height: 2000px">

    <div id="div1">divdiv</div>

</body>

</html>

　　

jq 拖拽的更多相关文章

  1. 27、 jq 拖拽

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jq拖拽插件

    (function ($) { var move = false; //标记控件是否处于被拖动状态 var dragOffsetX = 0; //控件左边界和鼠标X轴的差 var dragOffset ...

  3. Jquery拖拽，拖动排序插件

    上github搜jquery-sortable <!-- jq拖拽排序 --> <script src="${contextPath}/static/excelTable/ ...

  4. jQ插件--时间线插件和拖拽API

    这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...

  5. JQ实现3D拖拽效果

    <!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...

  6. 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  7. jq实现拖拽

    $("body").delegate( ".msg-layer",{ mousedown: function (e) { var el = $(".m ...

  8. Jquery 多行拖拽图片排序 jq优化

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 不断优化，重构我的代码-----拖拽jquery插件

    最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧 // JavaScript Document (function($){ var defaults = { actionEl ...

随机推荐

  1. 【TYVJ】1307 联络员（最小生成树）

    http://tyvj.cn/Problem_Show.aspx?id=1307 kruskal裸题.(水题红色警报) #include <cstdio> #include <cst ...

  2. linux rootfs制作

    http://blog.sina.com.cn/s/blog_6795385f01011ifg.html 作一个嵌入式Linux rootfs,并且实现 web 服务 1. 文件系统简介 •理论上说一 ...

  3. CentOS 下安装翻译软件星际译 StarDict

    wget http://downloads.naulinux.ru/pub/NauLinux/6x/x86_64/sites/School/RPMS/stardict-3.0.2-1.el6.x86_ ...

  4. Android--学习记录

    最近天天被兔子激励,所以开始找工作,发现Android和iOS都会更有竞争力,所以就想学一下Android Android比iOS更开放,学习难度可能会更大,我已经做好了吃苦的准备 计划是三个月搞定, ...

  5. python基础数据类型

    整形:(不可变类型) >>> a = 123>>> type(a)<class 'int'> 长整形:(在python3中已经废弃了) >> ...

  6. 移动Web应用开发入门指南——视觉篇

    视觉篇 智能移动设备由于发展历史短,但更新速度快,从而导致移动设备的物理属性差异巨大,其中一部分物理属性影响视觉,另一部分影响到交互.兼容或性能.对人类来说,至少有80%以上的外界信息通过视觉获得,视 ...

  7. ORA-01791: 不是 SELECTed 表达式

    Oracle 9i数据库,执行下面语句出现错误“ORA-01791: 不是 SELECTed 表达式”:select distinct t.name from auth_employee t orde ...

  8. git命令常见问题总结

    1.git如何放弃所有本地修改 git checkout . #本地所有修改的.没有的提交的,都返回到原来的状态 git stash #把所有没有提交的修改暂存到stash里面.可用git stash ...

  9. nginx 配置文件分析以及配置负载均衡器

    修改Nginx核心配置文件nginx.conf # cat /usr/local/nginx/conf/nginx.conf user www www; worker_processes ; # 工作 ...

  10. 关于C语言读取多行数据的问题

    我有如下数据格式3360  2001     5   1750.5   1246.5  22.5  n    1775=1177-1316:13360  2001     5   1750.5   1 ...