jq实现拖拽
$("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实现拖拽的更多相关文章
- 基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息
技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...
- jq元素拖拽
<div id="a1"></div> js <script type="text/javascript"> $(funct ...
- jQ插件--时间线插件和拖拽API
这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...
- 27、 jq 拖拽
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JQ实现3D拖拽效果
<!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...
- Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 不断优化,重构我的代码-----拖拽jquery插件
最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧 // JavaScript Document (function($){ var defaults = { actionEl ...
- html5拖拽实现
1.需求 做一个h5正方形的拖拽框 2.分析 使用touchstart,touchmove,touchend这3个事件实现. 需要记录的数据有三组数据,分别是下图的(x0,y0),(x1,y1),(x ...
- JQUERY 拖拽 draggable droppable resizable selectable sortable
今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/ ...
随机推荐
- angular2自学笔记(二)---路由、服务等八大主要构造块
angular的思想:总是把数据访问工作委托给一个支持性服务类. Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布 ...
- javascript的ajax功能的概念和示例
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML). 个人理解:ajax就是无刷新提交,然后得到返回内容. 对应的不使用ajax时的传统网 ...
- EF Code-First数据迁移
Code-First数据迁移 首先要通过NuGet将EF升级至最新版本. 新建MVC 4项目MvcMigrationDemo 添加数据模型 Person 和 Department,定义如下: usi ...
- VS设置护眼色
打开vs2013 选项 环境...如图所示
- mac平台安装配置TomCat
1.下载Tomcat 7.0 地址:http://tomcat.apache.org/download-70.cgi Binary Distributions -> Core 选择zip或tar ...
- IDEA 如何加上 tomcat
前言: idea 上已经有一个 tomcat 了,因为这个 tomcat 为 32 的,需要加一个 64 为的 tomcat . 第一步: 第二步: 第三步: 点击 OK 就好. 结果:
- Microsoft ReportViewer 控件类型版本兼容问题及解决方法
错误 Parser Error Message: The base class includes the field 'rvEquipment', but its type (Microsoft.Re ...
- MVC 事物同时保存,更新数据库
本人小白一枚,第一次写博,主要用作笔记,怕以后忘记了,大神尙可路过,也可多多指教 事物用在同时保存更新数据时,及只要在事物块的范围内,有一个操作出错则事物块所有更新,保存等操作都不会执行 ...
- python中静态方法(@staticmethod)和类方法(@classmethod)的区别
一般来说,要使用某个类的方法,需要先实例化一个对象再调用方法. 而使用@staticmethod或@classmethod,就可以不需要实例化,直接类名.方法名()来调用. 这有利于组织代码,把某些应 ...
- 03:成绩排序 个人博客:doubleq.win
个人博客:doubleq.win 03:成绩排序 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 给出班里某门课程的成绩单,请你按成绩从高到低对成绩单排序输出 ...