<!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. 使用MySQL Workbench查询超时的错误

    MySQL Workbench是MySQL提供的连接工具,一直在用它.但是今天运行了一个SQL缺报出如下的错误: errcode 2013 lost connection to mysql serve ...

  2. JS鼠标提示框效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 小米手机 - Charles无法安装证书 因为无法读取证书

    1.不要使用小米原装的浏览器安装证书 2.使用第三方浏览器安装,如我使用的是UC浏览器 3.使用第三方浏览器安装的证书格式是".pem"格式问卷 4.将这个文件放入小米的downl ...

  4. Codeforces 1140F 线段树 分治 并查集

    题意及思路:https://blog.csdn.net/u013534123/article/details/89010251 之前cf有一个和这个相似的题,不过那个题只有合并操作,没有删除操作,直接 ...

  5. 四大开源协议比较:BSD、Apache、GPL、LGPL（转）

    转自: 四大开源协议比较:BSD.Apache.GPL.LGPL 本文参考文献:http://www.fsf.org/licensing/licenses/ 现今存在的开源协议很多,而经过Open S ...

  6. 【leetcode】bash脚本练习

    [192]Word Frequency Write a bash script to calculate the frequency of each word in a text file words ...

  7. mysql查找字段空、不为空的方法总结

    1.不为空 Select * From table_name Where id<>'' Select * From table_name Where id!='' 2.为空 Select ...

  8. Excel处理

    转载:https://www.cnblogs.com/cang12138/p/5606130.html 上面的博友已经讲的很清楚了,但是我们在服务端是获取不到前端上传文件的绝对路径的(因为新浏览器有安 ...

  9. Delphi ADOQuery的 DisableControls 和 EnableControls方法

    DisableControls方法是在程序修改或后台有刷新记录的时候切断数据组件,如TTABLE.ADOQUERY等等与组件数据源的联系.如果没有切断,数据源中只要一有数据的改动,尤其是批量改动的话, ...

  10. HDU6333 求组合数前m项的和

    目录 分块 莫队 @ HDU6333:传送门 题意:求组合数前m项的和. 在线分块or离线莫队 分块 重要的一个定理: \[C_{n}^{m} = 0\;\;m > n\] \[C_{n}^{m ...