$.fn.drag = function(obj) {

    var dragging = false;
var oDrag = $(obj); oDrag.mousedown(function(e) { dragging = true; var disX = e.pageX - oDrag.offset().left;
var disY = e.pageY - oDrag.offset().top; oDrag.css('position','absolute'); $(document).mousemove(function(e) { if(dragging) { var leftPos = e.pageX - disX;
var rightPos = e.pageY - disY; oDrag.css({'left': leftPos + 'px', 'top': rightPos + 'px'});
return false; } }).mouseup(function(e) { dragging = false;
//oDrag.css({'position':'','left':'','top':''});
e.cancelBubble = true; }); });
}
$.fn.drag(obj);

jquery 实现简单拖拽的更多相关文章

  1. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  2. jquery实现可拖拽的div

    由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...

  3. jquery 实现页面拖拽并保存到cookie

    实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...

  4. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  5. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

  6. jquery插件-自由拖拽

    最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...

  7. jQuery插件(拖拽)

    拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...

  8. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  9. jquery插件之拖拽

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...

随机推荐

  1. (原)使用mkl中函数LAPACKE_sgesv计算矩阵的逆矩阵

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5578027.html 参考文档:mkl的说明文档 lapack_int LAPACKE_sgesv(i ...

  2. chisel中pviews命令无法使用

    chisel是用Python写的LLDB调试器插件,用来调试iOS应用非常方便,相关下载安装链接如下:https://github.com/facebook/chisel.本人安装之后,在xcode里 ...

  3. self和this的不同

    在Java和C++中,this总是指的是当前实例地址,而在静态方法也就是类方法中,是不可以使用this的.在Objectvie-C中,self是既可以出现在实例方法中,也可以出现在类方法中,并且在不同 ...

  4. Mysql表大小数据大小索引大小查询

    SELECT CONCAT(ROUND((INDEX_LENGTH+DATA_LENGTH)/1024/1024, 2), 'MB') AS '总大小',CONCAT(ROUND(DATA_LENGT ...

  5. read/load

    ready先执行,load后执行. DOM文档加载的步骤: (1) 解析HTML结构. (2) 加载外部脚本和样式表文件. (3) 解析并执行脚本代码. (4) 构造HTML DOM模型.//read ...

  6. mysql索引分类及注意事项

    MYSQL索引主要分为四类:主键索引,普通索引(聚合,非聚合),唯一索引,全文索引 全文索引,主要是针对对文件,文本的检索, 比如文章, 全文索引针对MyISAM有用. 索引的原理:利用二叉树(哈希表 ...

  7. Java 学习 第五篇;面向对象

    1:基本数据类型的拆装: 基本变量类型 通过 new WrapperClass(primitive) 创建包装类对象: 包装类的对象 通过 WrapperInstance.XXXValue() 获取包 ...

  8. keil在WIN7下的破解

    win7好看的界面和不错的性能,被越来越多的人所接受并使用.对于学电子的人来说,往往要用到专业方面的软件如Keil.下面以Keil C51 V9.00 即最新版本uVision 4在win7下的破解为 ...

  9. Seletion Sort

    referrence: GeeksforGeeks The selection sort algorithm sorts an array by repeatedly finding the mini ...

  10. 转(havel 算法)

    http://www.cnblogs.com/wally/p/3281361.html poj 1659(havel算法) 题目链接:http://poj.org/problem?id=1659 思路 ...