$("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. i.mx6 Android5.1.1 初始化流程之init.rc解析(未完成)

    接上一篇:i.mx6 Android5.1.1 初始化流程之init进程 参考资料:http://blog.csdn.net/mr_raptor/article/category/799879 这个博 ...

  2. GitHub和git和repo的使用

    1. GitHub的使用 https://github.com/maogefff/GitHub-git-repo 2. git的使用 https://github.com/maogefff/GitHu ...

  3. 搭建Eclipse和MyEclipse的开发环境

    主要步骤: 下载并配置Eclipse 建立并运行一个简单的javaSE项目 下载并破解MyEclipse 整合Eclipse和MyEclipse 开发环境和Tomcat结合 关于这个配置也可以参考:h ...

  4. 一键LNMP文件

    https://lnmp.org/ LNMP相关软件安装目录Nginx 目录: /usr/local/nginx/MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/u ...

  5. mysql分表,批量生成数据

    一.mysql的分表策略 根据经验,Mysql表数据一般达到百万级别,查询效率会很低,容易造成表锁,甚至堆积很多连接,直接挂掉: 1,水平分割: 水平(横向)拆分:将同一个表的数据进行分块保存到不同的 ...

  6. SSM实现图片上传管理操作

    Spring MVC 实现文件上传 时序图 利用 Spring MVC 实现文件上传功能,离不开对 MultipartResolver 的设置.MultipartResolver 这个类,你可以将其视 ...

  7. 基于SSM框架配置多数据源

    项目基于ssm + maven,通过注解可以实现自动切换数据源. 一.pom.xml <?xml version="1.0" encoding="UTF-8&quo ...

  8. megajson 高性能的json序列化、反序列化工具

    go 自带的 encoding/json 支持json的序列化和反序列化, 然而它是基于反射的,有下面几个缺点: 反射是性能差的代名词, 并且无法在编译时进行优化. 只有 Public 字段才可以,反 ...

  9. Java 学习笔记(2)——基本语句、控制结构

    上一篇中简单谈了一下自己对Java的一些看法并起了一个头,现在继续总结java的相关语法.java语法总体上与C/C++一样,所以对于一个C/C++程序员来说,天生就能看懂Java代码.在学习java ...

  10. Django实现数据库中表格的增删查改

    1.urls.py """Django_demo1 URL Configuration The `urlpatterns` list routes URLs to vie ...