<!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. stdin stdout stderr - 标准 I/O 流

    Fd #include <stdio.h> Fd extern FILE *stdin; Fd extern FILE *stdout; Fd extern FILE *stderr; D ...

  2. JSON.parse 解析json字符串时，遇字符串换行符，解析失败

    今天遇到json字符串转对象时报错了,发现有个字符串有换行符,仔细找了原因. 结果是因为JSON.parse转json字符串时遇到一些特殊字符需要先转义,如图所示 然后尝试了各路大神介绍的办法,均不适 ...

  3. 互斥量mutex简介

    互斥量又称互斥锁.互斥量是一个可以处于两态之一的变量:解锁和加锁. 简介 编辑 如果不需要信号量的计数能力,有时可以使用信号量的一个简化版本,称为互斥量(mutex).互斥量仅仅适用于管理共享资源或一 ...

  4. SqlServer 查询的时候过滤条件有参数导致速度很慢的问题-参数嗅探

    何谓SQLSERVER参数嗅探 大家听到“嗅探”这个词应该会觉得跟黑客肯定有关系吧,使用工具嗅探一下参数,然后截获,脱裤o(∩_∩)o . 事实上,我觉得大家太敏感了,其实这篇文章跟数据库安全没有什么 ...

  5. classmethod和staticmethod

    假设有这么一个 class class Date(object): def __init__(self, day=0, month=0, year=0): self.day = day self.mo ...

  6. Flume速览

    Flume是一个分布式的.可靠的.高可用的海量日志采集.聚合和传输的系统.Java实现,插件丰富,模块分明. 数据流模型:Source-Channel-Sink 事务机制保证了消息传递的可靠性 一.基 ...

  7. web框架express学习一

    服务端 node app.jsapp.jslet express = require("express"); let http = require("http" ...

  8. 高级运维(二)：搭建Nginx服务器、用户认证、基于域名的虚拟主机、SSL虚拟主机、Nginx反向代理

    一.搭建Nginx服务器 目标: 在IP地址为192.168.4.5的主机上安装部署Nginx服务,并可以将Nginx服务器,要求编译时启用如下功能: 1> SSL加密功能 2> 设置Ng ...

  9. App响应式布局

    1.手机的响应式布局,所有的单位用rem来表示. 如:设计稿的宽度是750,则html标签的font-size=屏幕宽度/7.5.那么在网页中的尺寸 = 设计高上实际的尺寸/100. 把下面的代码作为 ...

  10. C语言新手写扫雷攻略3

    界面绘制好后,雷数也布置了,接下来就是游戏的运行过程了,今天先不说具体过程,再来看看需要用到的辅助函数 先是简单的画红旗,鼠标右键的功能是画红旗,至此我们都是在使用函数自己绘图,效率是低,但有助于理解 ...