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. 【BZOJ】1503: [NOI2004]郁闷的出纳员（Splay）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1503 这题没有看题解就1a了-好开心,, 其实后面去看题解发现他们的都很麻烦,其实有种很简单的做法: ...

  2. HNOI2015

    终于把湖南省的省选题切了(贵省真是厉害). T1 http://www.cnblogs.com/wzj-is-a-juruo/p/5228858.html T2 http://www.cnblogs. ...

  3. 【NOI2015】品酒大会

    一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品酒家”和“首席猎手”两个奖项,吸引了众多品酒师参加. 在大会的晚餐上,调酒师 Rainbow 调制了 ...

  4. C#页面添加提交数据后跳出小弹窗的功能

    很简单,将小弹窗部分写进一个div,利用div的visible属性去控制是否显示,首先默认为false; 当后台程序执行到插入数据完成后,设置session状态值为‘yes’ 判断,当session状 ...

  5. 关于UIWebView的总结

    关于UIWebView的总结 前言 今天参加了 Adobe 和 CSDN 组织的一个关于 PhoneGap 的开发讲座 ,而 PhoneGap 在 iOS 设备上的实现就是通过 UIWebView 控 ...

  6. [百科]sys/types.h

    sys/types.h中文名称为基本系统数据类型.在应用程序源文件中包含 <sys/types.h> 以访问 _LP64 和 _ILP32 的定义.此头文件还包含适当时应使用的多个基本派生 ...

  7. 【原】Windows下Nexus搭建Maven私服

    一.Maven安装 详见Java开发环境搭建 二.Nexus安装 2.1.下载 地址:http://www.sonatype.org/nexus/go/ 选择OSS(ZIP)版本 2.2.安装 将安装 ...

  8. Nginx 笔记与总结（7）Location：正则匹配

    在 /usr/local/nginx/conf/nginx.conf 的默认 server 段中,保留默认的 location 信息(之前测试的 location 配置删除): location / ...

  9. [SHELL进阶] （转）最牛B的 Linux Shell 命令 （四）

    1.查看ASCII码表 man 7 ascii  很多人初学编程都会接触到ascii码的概念,有时候为了查某个符号的ascii值,可能还得翻箱倒柜找出当年的课本?Linux Manpage里面其实包含 ...

  10. 批量清除BOM头

    批量清除BOM头 (2012-03-05 13:28:30) 转载▼ 标签: 杂谈   有些php文件由于不小心保存成了含bom头的格式而导致出现一系列的问题.以下是批量清除bom头的代码,复制代码, ...