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. 【wikioi】1033 蚯蚓的游戏问题（费用流）

    http://wikioi.com/problem/1033/ 这题也是很水的费用流啊,同之前那题一样,拆点然后建边,容量为1,费用为点权.然后建个源连第一行每个点,容量为1,费用为0,然后最后一行每 ...

  2. 发布android app到android market的方法

      转载自: http://www.stwind.org/android-market 给你的程序签名注意事项:所有提交到Market的程序必须经过签名.未经签名的程序不能安装.你可以使用个人证书去签 ...

  3. 小问题，小细节要注意（string类型转换为bool类型）

    一个表中的推荐字段是bit类型的,添加的时候推荐有两个值,如<asp:RadioButtonList ID="RadioButtonList1" runat="se ...

  4. SVN组成中trunk,branches and tags功能用法详解

    SVN组成中trunk,branches and tags功能用法详解  我相信初学开发在SVN作为版本管理时,都估计没可能考虑到如何灵活的运用SVN来管理开发代码的版本,下面我就摘录一篇文章来简单说 ...

  5. QDir, QFileInfo 和 QDirIterator 区别

    这三个类相互有关联,但是有不尽相同,首先从名字上看,QDir 和 QDirIterator 是针对于文件目录的,也就是文件夹,我们知道,对于一个文件夹,可以包含很多文件,也可以包含其他文件夹,通常是一 ...

  6. Lucene实战(第2版)》

    <Lucene实战(第2版)>基于Apache的Lucene 3.0,从Lucene核心.Lucene应用.案例分析3个方面详细系统地介绍了Lucene,包括认识Lucene.建立索引.为 ...

  7. gnuplotx轴的logscale显示

    假设数据是这样子的: gnuplot脚本如下: set terminal postscript eps color enhanced set log x set log y set format x ...

  8. ITIL图示

  9. Servlet编程-步步为营

    [环境]eclipse j2ee;Tomcat 7.0; [模型1] package com.zhiqi; import ...; public class TestServlet extends H ...

  10. PAT天梯赛练习题 L3-011. 直捣黄龙（多关键字SPFA+DFS）

    L3-011. 直捣黄龙 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 本题是一部战争大片 —— 你需要从己方大本营出发,一路 ...