1. $("body").delegate(
  2. ".msg-layer",{
  3. mousedown: function (e) {
  4. var el = $(".msg-layer");
  5. var os = el.offset(),
  6. dx = e.pageX - os.left, dy = e.pageY - os.top;
  7. $(document).on('mousemove.drag', function (e) {
  8. el.offset({top: e.pageY - dy, left: e.pageX - dx});
  9. });
  10. },
  11. mouseup: function (e) {
  12. $(document).off('mousemove.drag');
  13. }
  14. }
  15. );
  1. ".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. i.mx6 Android5.1.1 servicemanager本地服务

    接在之前的 i.mx6 Android5.1.1 初始化流程之init进程 i.mx6 Android5.1.1 初始化流程之init.rc解析 servicemanager是由init创建的本地服务 ...

  2. IOS Core Image之二

    在上篇博客IOS Core Image之一中了解了下CIImage.CIFilter.CIContext三个类的使用,这篇了解下滤镜链(多滤镜)和人脸检测(不是人脸识别). 一.多滤镜 1.有些效果不 ...

  3. 【angular5项目积累总结】http请求服务封装

    http.provider.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/co ...

  4. C# 空合并运算符 ??

    C#语言中,??运算符称为空合并运算符: a??b形式的空合并表达式要求a为可以为null的类型或引用类型.如果a为非null,则a??b的结果为a:否则,结果为b.仅当a为null时,该操作才计算b ...

  5. Menustrip控件和ContextMenustrip控件

    Menustrip 控件是由System.Windows.Forms.Menustrip类提供,取代了以前的MainMenu控件,是应用程序菜单结构的容器,在建立菜单时,要给Menustrip控件添加 ...

  6. java 基础 --- servlet

    问题 : servlet 这个类是有什么作用 概述 servlet 是个接口,这个接口的作用是规范了接收请求的处理类.而最终的实现交给了 servlet 容器去实现. servlet 接口 接口方法如 ...

  7. Azure .NET Libraries 入门

    本指南演示了以下 Azure .NET API 的用法,包括设置认证.创建并使用 Azure 存储.创建并使用 Azure SQL 数据库.部署虚拟机.从 GitHub 部署 Azure Web 应用 ...

  8. DevExpress13.2.9 控件使用经验总结

    一.换肤功能 1. 添加 DevExpress.OfficeSkins 和 DevExpress.BonusSkins 两个引用 2. 皮肤注册 DevExpress.UserSkins.BonusS ...

  9. CodeForces 598A(水)

    还是要注意int和long long的范围,以及double型的问题 pow函数经常会报一个double型的错,参考这篇文章 http://blog.csdn.net/lawrencesgj/arti ...

  10. 原型模式(GOF23)

    依赖关系的倒置 基本假设在于抽象变化的慢,而依赖于抽象的细节变化的快,所以要做到抽象不依赖于实现的细节,而实现细节应该依赖于抽象 设计模式不是代码的复用,而是经验的复用,通过分析来定义抽象和细节,不要 ...