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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         *{margin: 0; padding: 0}
  8.         #div1{width: 100px; height: 100px; background: red; position: absolute; left: 100px;
  9.             top: 100px;}
  10.     </style>
  11.     <script src="jquery-1.12.3.min.js"></script>
  12.     <script>
  13.         $(function(){
  14.             var disX = 0;
  15.             var disY = 0;
  16.             var $div1 = $("#div1");
  17.             $div1.on('mousedown',function(ev){
  18.                 disX = ev.pageX - $(this).offset().left;
  19.                 disY = ev.pageY - $(this).offset().top;
  20.                 $(document).on('mousemove',function(ev){//此处忘了加ev, 找了一个多小时!
  21.                     var left = ev.pageX - disX;
  22.                     var top = ev.pageY - disY;
  23.                     console.log(left+":"+top)
  24.                     $div1.css('left',left);
  25.                     $div1.css('top',top );
  26.                 });
  27.                 $(document).on('mouseup',function(){
  28.                     console.log("off")
  29.                     $(this).off();
  30.                 });
  31.                 return false;//按下的时候阻止默认事件
  32.             })
  33.         });
  34.     </script>
  35. </head>
  36. <body style="height: 2000px">
  37.     <div id="div1">divdiv</div>
  38. </body>
  39. </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. Struts2_ValueStack,OGNL详解

    一.ValueStack    1.ValueStack是一个接口,在struts2中使用OGNL(Object-Graph Navigation Language)表达式实际上是使用实现了Value ...

  2. html5文章 -- HTML5开发实例-网易微博手机Web App开发过程

    HTML5在国内外越来越受到互联网开发团队的青睐.国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得 ...

  3. Spring对加载的bean之间循环依赖的处理

    根据下面文档的叙述,简言之: 对于相互之间通过构造函数注入相互循环依赖的情况,Spring会抛出BeanCurrentlyInCreationException错误. 如果AB两个beans是通过属性 ...

  4. FZU 1018 枚举dp

    题意 给出一个数字组成的立方体 在其中选取一个体 使这个体中的数字之和最小 不可以不选 fzu的题目分类动态规划里面不是按难度排得 是按照题号..记得以前做题碰到过算 矩阵里面求子矩阵的最大和的 不会 ...

  5. java web基础2HTTP协议知识点总结

    一.HTTP协议基础 1.定义:HTTP是基于TCP连接的浏览器与服务器通信协议.(即传输层先用TCP三次握手建立连接,进而HTTP通信) 2.连接原理:先进行TCP建立端到端连接,然后发送和接受HT ...

  6. PHP Error 和 Logging 函数

    PHP Error 和 Logging 函数 PHP Error 和 Logging 简介 Error 和 Logging 函数允许您对错误进行处理和记录. Error 函数允许用户定义错误处理规则, ...

  7. Bootstrap页面布局13 - BS按钮

    bootstrap中的按钮类 一般可以作为按钮的标签有:<a></a>  <button></button>  <input type='butt ...

  8. Class Abstraction -- Object Interfaces

    <?php /* PHP 5 introduces abstract classes and methods. Classes defined as abstract may not be in ...

  9. windows系统中ubuntu虚拟机安装及web项目到服务上(一)

    一:ununtu虚拟机安装 安装vm, 桥接,换国内源,安装ssh 服务 装jdk,装tomcat,装mysql, 部署,完成 主要用到的软件工具 Xmanager Enterprise 4,VMwa ...

  10. SMS模型格网转换为MIKE21的格网源代码

    program main !sms网格转换成mike21网格 DIMENSION X(),Y(),H(),NDNN(,),ncbd() dimension NBS(),NOBD(,),NSED(,), ...