<!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. 如何通过cmd命令远程重启或远程关闭Windows服务器

    一.想要远程控制服务器,前提条件是远程服务器需要开启IPC$ ,且本地能访问远程服务器445端口 1.开启ipc$ net share IPC$ 2.如果只指定管理员才有执行ipc$的权限 net s ...

  2. 界面设计微信小程序

    上一个周期将微信小程序的程序编完了,虽然还有很多需要修改的地方,大体已经完成.剩下的边角料以后再弄 这个周期来学习一下微信小程序的设计....好吧. 首先还是需要看一下微信的设计指南的.地址 http ...

  3. JS判断浏览器类型的方法总结（IE firefox chrome opera safari）

    JS判断浏览器类型的方法总结,可判别当前客户端所使用的浏览器是ie,firefox,safari,chrome或者是opera,另外js可以精确判断到ie浏览器的版本,依然直接上代码,需要的朋友可按照 ...

  4. hibernate调用oracle存储过程||函数

    pakeage dao.Impl; //调用函数FUN_GET(); public String get(String Id,String Name){ return getSession().cre ...

  5. Ansible自动化部署K8S集群

    Ansible自动化部署K8S集群 1.1 Ansible介绍 Ansible是一种IT自动化工具.它可以配置系统,部署软件以及协调更高级的IT任务,例如持续部署,滚动更新.Ansible适用于管理企 ...

  6. 理解 Java 序列化

    一.什么是序列化 序列化是一种对象持久化的手段.类通过实现 java.io.Serializable 接口以启用其序列化功能. 序列化:把对象转换为字节序列的过程. 反序列化:把字节序列恢复为对象的过 ...

  7. Unity HOME

    { https://unity.com/cn?_ga=2.134655153.1528856053.1574826116-818341090.1574826116 }

  8. Windows NtQueryInformationProcess()

    { https://www.orcode.com/article/Processes_20126324.html } { 或代码 文章 编程通用 线程,进程及IPC 与NtQueryInformati ...

  9. Vue学习笔记【10】——Vue指令之v-if和v-show

    Vue指令之v-if和v-show <!DOCTYPE html> <html lang="en"> ​ <head> <meta cha ...

  10. 【书上讲解】最大m段子段和问题

    描述 [题解] 设f[i][j]表示前i个数字分成了j段的最大子段和. 则f[i][j] = max(f[i-1][j]+a[i] (第i个数字和第j段合在一起),f[k][j-1]+a[i] (第i ...