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. 【COGS】147. [USACO Jan08] 架设电话线（二分+spfa）

    http://cojs.tk/cogs/problem/problem.php?pid=147 学到新姿势了orz 这题求的是一条1-n的路径的最大路径最小. 当然是在k以外的. 我们可以转换一下. ...

  2. python3环境搭建（CentOS7.2）

    安装python3(自动安装pip3):yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqli ...

  3. 安装phpunit

    按照网上的提示,将go-pear.phar和phpunit.phar都放到php.exe所在的目录.但是以管理员身份运行时,输入命令php PEAR/go-pear.phar或php -d phar. ...

  4. Excel 中单元格和范围的引用(即访问的表示方法)

    计算机中,无非是数据和数据的处理这两件事.Excel的工作表能存储大量数据,除了这些原始数据,我们还要用函数来处理这些数据,比如求和求积,求平均值,排序等等,并把处理结果也存在单元格里.在Excel中 ...

  5. Use a PowerShell Module to Easily Export Excel Data to CSV

    http://blogs.technet.com/b/heyscriptingguy/archive/2011/07/21/use-a-powershell-module-to-easily-expo ...

  6. Ubuntu 12.04 LTS 及ubuntu14.10 -- NFS安装

    在Linux 服务器上配置好NFS 根文件系统后,在单板侧挂载NFS 文件系统,具体操作如下:ifconfig eth0 hw ether 00:10:85:18:01:84 /*配置MAC地址*/i ...

  7. RESTful和JAX-RS

    一.简介 Java Web有很多成熟的框架,主要可以分为两类Web Application和Web Services.用于Web Application的框架包括官方的Servlet/JSP, JST ...

  8. NV Perf Kit

    https://developer.nvidia.com/gameworksdownload#?dn=perfkit-4-0-0 Title Version Release Date PerfKit  ...

  9. OpenGL extension specification (from openGL.org)

    Shader read/write/atomic into UAV global memory (need manual sync) http://www.opengl.org/registry/sp ...

  10. Web 在线文件管理器学习笔记与总结（7）重命名文件

    rename($oldname,$newname) 重命名文件或目录 <<<EOF EOF; 使用heredoc 技术,来部分实现界面与代码的准分离 重命名时,需要验证新文件名的合法 ...