<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             #box{

                 width: 100px;

                 height: 100px;

                 background: red;

                 position: absolute;

                 left: 20px;

                 top: 20px;

             }

         </style>

     </head>

     <body>

         <div id = "box"></div>

         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

         <script type="text/javascript">

             $(function () {

                 $("#box").mousedown(function (e) {

                     var disX = e.offsetX;

                     var disY = e.offsetY;

                     $(document).mousemove(function (e) {

                         $("#box").css( {left: e.pageX-disX, top: e.pageY-disY} );

                     });

                     $(document).mouseup(function () {

                         $(document).off("mousemove mouseup");

                     });

                 });

             })

         </script>

     </body>

 </html>

jq-demo-拖拽的更多相关文章

  1. 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  2. jq实现拖拽

    $("body").delegate( ".msg-layer",{ mousedown: function (e) { var el = $(".m ...

  3. jq元素拖拽

    <div id="a1"></div> js <script type="text/javascript"> $(funct ...

  4. Jquery拖拽原理

    /* onmousedown : 选择元素 onmousemove : 移动元素 onmouseup : 释放元素 */ 查看Demo:拖拽图片 function drag(obj) { obj.on ...

  5. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  6. jQ插件--时间线插件和拖拽API

    这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...

  7. 移动端的拖拽这个demo实现的功能

    SQL数据库适合那些需求确定和对数据完整性要去严格的项目.NoSQL数据库适用于那些对速度和可扩展性比较看重的那些不相关的,不确定和不断发展的需求. 总所周知,网页的加载速度跟图片是有很大的关系的,因 ...

  8. 写一个兼容性比较好的拖拽DEMO

    写一个兼容性比较好的拖拽DEMO 查看Demo 思路 div盒子 鼠标按下事件onmousedown 鼠标移动事件onmousemove,获得鼠标的坐标,将div移动至鼠标的当前坐标 鼠标抬起事件om ...

  9. 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

  10. 27、 jq 拖拽

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. redis集群添加新节点

    一.创建节点(接上文) 1.在H1服务器/root/soft目录下创建7002目录 2.将7001目录的配置文件redis.conf拷贝到7002,并修改配置文件的端口 3.进入 redis-5.0. ...

  2. win10配置jdk环境变量及遇到的坑

    第一步.在系统变量中新增变量命名JAVA_HOME,值为jdk的安装目录 JAVA_HOME C:\Program Files\Java\jdk1.8.0_231 第二步.在系统变量中增加path的值 ...

  3. CF566E Restoring Map

    题意:乱序给你树上的每一个节点与之相距<=2的节点集合(并不知道这具体是哪个节点). 还原整棵树. 标程: #include<bits/stdc++.h> #define P pai ...

  4. 61. File类

    IO技术主要作用是解决设备与设备之间的数据传输问题.比如:硬盘---->内存     内存的数据---->硬盘上    把硬盘的数据------>内存中 IO技术的应用场景:     ...

  5. 深入理解MAGENTO – 第八章 – 深入MAGENTO的系统配置

    (以下是原文) Last time we talked about Magento’s System Configuration system. If you missed it, you’ll wa ...

  6. 大牛公司的github

    Google Google https://github.com/google Google Samples https://github.com/googlesamples Google Codel ...

  7. move_base 分层代价地图的作用（翻译）

    A. 标准层 ​ Static Map Layer:为了做全局规划,机器人需要一个超越其传感器的地图,以了解墙壁和其他静态障碍物的位置. 静态地图可以先用SLAM算法生成,也可以从架构图中创建. 当层 ...

  8. BZOJ 4516: [Sdoi2016]生成魔咒(后缀数组)

    传送门 解题思路 题目其实就是动态维护本质不同的串的个数.考虑到只有加数字的操作,所以可以用后缀数组.题目是每次往后加数字,这样不好处理,因为每次加数字之后所有的后缀都会改变.所以要转化一下思路,就是 ...

  9. flutter 调用摄像头和照片

    设置一个按钮调用 打开showCupertinoModalPopup FloatingActionButton(onPressed: (){ _showDialog(context); }, chil ...

  10. pandas中读取文件报错

    import pandas as pd fileName = "路径中带有中文/xxx.csv" tf_train = pd.read_csv(fileName) 会提示报错 OS ...