$("body").delegate(
".msg-layer",{
mousedown: function (e) {
var el = $(".msg-layer");
var os = el.offset(),
dx = e.pageX - os.left, dy = e.pageY - os.top;
$(document).on('mousemove.drag', function (e) {
el.offset({top: e.pageY - dy, left: e.pageX - dx});
});
},
mouseup: function (e) {
$(document).off('mousemove.drag');
}
}
);
".msg-layer"为被拖拽的元素

jq实现拖拽的更多相关文章

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

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

  2. jq元素拖拽

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

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

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

  4. 27、 jq 拖拽

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

  5. JQ实现3D拖拽效果

    <!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...

  6. Jquery 多行拖拽图片排序 jq优化

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

  7. 不断优化,重构我的代码-----拖拽jquery插件

    最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧 // JavaScript Document (function($){ var defaults = { actionEl ...

  8. html5拖拽实现

    1.需求 做一个h5正方形的拖拽框 2.分析 使用touchstart,touchmove,touchend这3个事件实现. 需要记录的数据有三组数据,分别是下图的(x0,y0),(x1,y1),(x ...

  9. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

随机推荐

  1. unity多线程

    多线程概念 多线程,是指实现多个线程并发执行的技术,合理利用多线程可以提升程序的性能,在unity中,一般是避免使用多线程的,unity对多线程的支持并不友好. 协程概念 协程,是指在主线程运行时开启 ...

  2. [转]Http请求中Content-Type讲解以及在Spring MVC中的应用

    本文转自:http://blog.csdn.net/blueheart20/article/details/45174399 引言: 在Http请求中,我们每天都在使用Content-type来指定不 ...

  3. [转]Porting to Oracle with Entity Framework NLog

    本文转自:http://izzydev.net/.net/oracle/entityframework/2017/02/01/Porting-to-Oracle-with-Entity-Framewo ...

  4. EF 查询数据不读取缓存的解决办法

    EF查询(不使用缓存):Set<T>().AsNoTracking() 今天工作中发现一个很妖的问题,修改产品界面,修改数据后,数据库的值发生变化,感觉掉坑里了. 然后发现读取对象的方法是 ...

  5. IntelliJ使用指南—— 导入Eclipse的Web项目

    通常一个团队中可能有人用eclipse,有人用intelliJ,那么经常会出现需要导入别人用eclipse建好的web项目.而IntelliJ提供了多种项目类型的导入方式,其中就有eclipse. 在 ...

  6. jQuery基础---动画效果

    内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性  发文不易,转载请注明出处~ 一.显示.隐藏 jQuery 中显示方法 ...

  7. 数据结构(三)--- B树(B-Tree)

       文章图片代码来自邓俊辉老师的课件 概述 上图就是 B-Tree 的结构,可以看到这棵树和二叉树有点不同---"又矮又肥".同时子节点可以有若干个小的子节点构成.那么这样一棵树 ...

  8. 使用nodeJs在本地搭建最简单的服务

    在搭建web服务器之前,需要先安装node.js 安装后node.js,接下来就需要安装http的镜像文件 一:本机安装软件 下载最新的NodeJs,进行安装.一直点击下一步就可以了.然后就可以查看安 ...

  9. 关于C# 委托(delegate)与事件(event)的用法及事例

    C#中的委托和事件对于新手可能会有一点难理解,所以先从一个小例子入手,以便能更好的理解其如何使用.有一个学生每天定闹钟在早上6点起床,所以当每天早上6点的时候,闹钟就会响起来,从而学生才会按时起床. ...

  10. centos文件/文件夹操作-检查磁盘、内存、cpu使用情况-vi操作命令

    Part1:CentOS文件/文件夹操作 1.新建文件夹 即创建目录 mkdir 文件名 新建一个名为test的文件夹在home下 vi source1 mkdir /home/test 注意:当创建 ...