$("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. angular2自学笔记(二)---路由、服务等八大主要构造块

    angular的思想:总是把数据访问工作委托给一个支持性服务类. Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布 ...

  2. javascript的ajax功能的概念和示例

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML). 个人理解:ajax就是无刷新提交,然后得到返回内容. 对应的不使用ajax时的传统网 ...

  3. EF Code-First数据迁移

    Code-First数据迁移  首先要通过NuGet将EF升级至最新版本. 新建MVC 4项目MvcMigrationDemo 添加数据模型 Person 和 Department,定义如下: usi ...

  4. VS设置护眼色

    打开vs2013 选项 环境...如图所示

  5. mac平台安装配置TomCat

    1.下载Tomcat 7.0 地址:http://tomcat.apache.org/download-70.cgi Binary Distributions -> Core 选择zip或tar ...

  6. IDEA 如何加上 tomcat

    前言: idea 上已经有一个 tomcat 了,因为这个 tomcat 为 32 的,需要加一个 64 为的 tomcat . 第一步: 第二步: 第三步: 点击 OK 就好. 结果:

  7. Microsoft ReportViewer 控件类型版本兼容问题及解决方法

    错误 Parser Error Message: The base class includes the field 'rvEquipment', but its type (Microsoft.Re ...

  8. MVC 事物同时保存,更新数据库

    本人小白一枚,第一次写博,主要用作笔记,怕以后忘记了,大神尙可路过,也可多多指教 事物用在同时保存更新数据时,及只要在事物块的范围内,有一个操作出错则事物块所有更新,保存等操作都不会执行        ...

  9. python中静态方法(@staticmethod)和类方法(@classmethod)的区别

    一般来说,要使用某个类的方法,需要先实例化一个对象再调用方法. 而使用@staticmethod或@classmethod,就可以不需要实例化,直接类名.方法名()来调用. 这有利于组织代码,把某些应 ...

  10. 03:成绩排序 个人博客:doubleq.win

    个人博客:doubleq.win 03:成绩排序 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 给出班里某门课程的成绩单,请你按成绩从高到低对成绩单排序输出 ...