$.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. 通过startup启动tomcat一闪而过的问题

    下载了免安装版的tomcat7,在通过startup.bat启动时,控制台一闪而过.记事本讲startup.bat打开,在最后一行加上pause,然后重新双击startup.bat,发现控制台打印的错 ...

  2. 用git提交代码步骤

    1.git add XXXX2.git commit - 'xxx'3.git stash4. //git pull --rebase 4. git rebase origin/develop git ...

  3. WordPress插件制作笔记(三)---Stars Comments Article

    wp 文章星级评价 插件 下载地址4:http://pan.baidu.com/s/1eQnGIGU [articles_star_vote_score_optiontable_serialize_c ...

  4. mongodb操作记录

    [User]1.db.addUser("name","pwd","true/false")2.db.auth("name" ...

  5. WPF笔记(1.3 属性元素)——Hello,WPF!

    原文:WPF笔记(1.3 属性元素)--Hello,WPF! 这一节中“属性元素”的概念可以用匪夷所思形容.1.WPF用标签元素实现对象建模,有两种:Control和Container,都用来装载内容 ...

  6. IE input X 去掉文本框的叉叉和密码输入框的眼睛图标

    从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本对于type="password&q ...

  7. IOS深入学习(4)之Coordinate System

    1 前言 在IOS中相信大家会经常跟一些bounds,frame之类的打交道,这不免会涉及坐标系统,今天我们就来介绍一下Coordinate System(坐标系). 2 详述 坐标系统是定位,大小, ...

  8. python使用post登陆电子科大信息门户并保存登陆后页面

    python使用post登陆电子科大信息门户并保存登陆后页面 作者:vpoet mail:vpoet_sir@163.com #coding=utf-8 import HTMLParser impor ...

  9. OpenStack Keystone v3 API新特性

    原连接 http://blog.chinaunix.net/uid-21335514-id-3497996.html keystone的v3 API与v2.0相比有很大的不同,从API的请求格式到re ...

  10. Java Service Wrapper

    Java Service Wrapper 将Java 应用程序部署成Windows系统服务Java Service Wrapper 1 Product Overview 1 Editions 2 Me ...