<!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. js转义符

    \0 :null(\u0000) \b :后退键(\u0008) \f :换页符(\u000C) \n :换行符(\u000A) \r :回车键(\u000D) \t :制表符(\u0009) \v ...

  2. ionic3.0 alipay-base插件移除后会添加多余的链接文件在nodes-modules中，导致再安装其他插件或移除插件时报错问题

    1.报错截图: 2.如图因为nodes-module 文件夹中有多余的链接文件导致报错. 3.解决方法:将该链接文件删除即可.

  3. java 中String类的常用方法总结，玩转String类

    String类: String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象.String类对象创建后不能修改,StringBuffer & St ...

  4. ubuntu18.4 搭建lamp环境

    一.Apache2 web服务器的安装: 可以先更新一下服务器(可选) 1.sudo apt update             # 获取最新资源包 2.sudo apt upgrade       ...

  5. 群晖NAS被攻击

    上周给新员工办理入职的时候,因为我们有自己的NAS系统,给他们建账号的时候,突然发现群晖无法登陆,很奇怪. 然后查看群晖系统,发现网络能Ping 通,但是群晖管理界面无法打开,一开始以为机房天热,硬盘 ...

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

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

  7. Ubuntu更换阿里云数据源

    sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak sudo vim /etc/apt/sources.list 将里面的内容全部删除修改成 ...

  8. grpc协议--客户端构造

    由于服务端不在构造,已经构造完成不做构造 gRPC 接口名字为service,proto文件内有定义 1.本目录生成grpc文件 python -m grpc_tools.protoc -I. --p ...

  9. Web安全之环境搭建

    一. 工具集:Linux: Kali最新版(A/P:root/toor).Windows7/10. 靶机:OWASP_BWA(A/P:root/owaspbwa).DVWA.Mutillidae.We ...

  10. taro-安装及使用-npm

    taro-安装及使用 https://nervjs.github.io/taro/docs/GETTING-STARTED.html 安装 Taro 项目基于 node,请确保已具备较新的 node ...