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. TC SRM 584 DIV 2

    第一次在DIV2 AK了. 250水题. 500,FLoyd搞出所有边的最短路,然后找最短路,中最长的,如果有不连通的边返回-1 1000,组合DP,各种慌乱,在最后1分钟时,交上了,感觉很棒,最后还 ...

  2. shenyi 语录

    [讲师]沈逸(65480539) 2016-06-08 14:58:42   会centos 转redhat是分分钟的事 [讲师]沈逸(65480539) 2016-06-08 14:58:54 查看 ...

  3. Ubuntu输入密码登陆后又跳回到登录界面

    现象:在Ubuntu登陆界面输入密码之后,黑屏一闪并且出现了check battery state之类的文字之后,又跳转到登录界面.原因:主目录下的.Xauthority文件拥有者变成了root,从而 ...

  4. DS实验题 地鼠安家

    ★实验任务 fd是一个公认的美丽校园.一天,fd来了一群地鼠,编号为1到n,他们希望在这里定居.现在先由第一只地鼠往下打一个单位的距离,并且在那里安家.对于每一个已经安家的地鼠,如果他左下或右下没有邻 ...

  5. 使用AndroidStudio自动生成JavaDoc文档

    选中所需要生成的Module,找到工具栏上的 Tools,选择 Generate JavaDoc 出现如图的窗口 选择输出路径,就自动生成. 如果出现编码错误提示,则在 Other command l ...

  6. Yii源码阅读笔记（四）

    所有控制器action的基类yii\base\Action.php namespace yii\base;//定义的命名空间 use Yii //使用的命名空间 class Action extend ...

  7. C# Xml文件操作，解释见注释

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. 使用ngrok

    使用ngrok让微信公众平台通过80端口访问本机 首先声明我是用java-tomcat来研究微信公众平台的. 微信公众平台要成为开发者,需要填写接口配置信息中的“URL”和“Token”这两项(参见: ...

  9. 基于LR的数据库性能测试

    web services协议 在LR的web services协议中提供了如下函数进行数据库的连接和执行sql语句,以实现对数据库的性能测试,也可以实现向数据库中自动生成批量数据. lr_db_dis ...

  10. 10.PHP内核探索：Apache运行与钩子函数

    Apache是目前世界上使用最为广泛的一种Web Server,它以跨平台.高效和稳定而闻名.按照去年官方统计的数据,Apache服务器的装机量占该市场60%以上的份额.尤其是在 X(Unix/Lin ...