$("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. ExcelHelper----根据指定样式的数据,生成excel(一个sheet1页)文件流

    /// <summary> /// Excel导出类 /// </summary> public class ExcelHelper { /// <summary> ...

  2. laravel5.4学习--laravel安装

    1.使用Laravel HomeStead可以直接作为laravel的环境,如果没有使用Homestead,就必须保证开发环境满足以下要求 PHP版本 >= 5.6.4PHP扩展:OpenSSL ...

  3. [转]asp.net权限认证:HTTP基本认证(http basic)

    本文转自:http://www.cnblogs.com/lanxiaoke/p/6353955.html HTTP基本认证示意图 HTTP基本认证,即http basic认证. 客户端向服务端发送一个 ...

  4. JSON 教程

    1JSON 1.什么是 JSON ? 1.1JSON:JavaScript 对象表示法(JavaScript Object Notation). 1.2JSON 是存储和交换文本信息的语法.类似 XM ...

  5. MapReduce详解和WordCount模拟

    最早接触大数据,常萦绕耳边的一个词「MapReduce」.它到底是什么,能做什么,原理又是什么?且听下文讲解. 是什么 MapReduce 即是一个编程模型,又是一个计算框架,它充分采用了分治的思想, ...

  6. MySQL 数据类型总结及选取准则

    整数 整数有 TINYINT, SMALLINT, MEDIUMINT, INT 和 BIGINT 类型. 占用    8          ,  16            24,          ...

  7. mybatis oracle 顺序模糊匹配

    前言:有时需要顺序模糊匹配字段. 用一半的 % 就好: t.item like #{item}||'%'

  8. C#3.0匿名类和Lanmda表达式

    1.初始化器:className variableName = new className(property1=value1…); 2.var可以声明一个没有类型的变量,根据赋值的不同改变数据类型 3 ...

  9. Berlekamp-Massey算法

    \(BM\) 算法 用处 它可以用来求常系数线性递推的系数,并且可以求出最短的 求出来有什么用呢? 你可以闷声Cayley-Hamilton定理优化递推矩阵快速幂 算法简介 首先设一个数列 \(f\) ...

  10. BZOJ1258 [CQOI2007]三角形

    Description 画一个等边三角形,把三边的中点连接起来,得到四个三角形,把它们称为T1,T2,T3,T4,如图1.把前三个三角形也这样划分,得到12个更小的三角形:T11,T12,T13,T1 ...