jquery 实现简单拖拽
$.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 实现简单拖拽的更多相关文章
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- jquery实现可拖拽的div
由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...
- jquery 实现页面拖拽并保存到cookie
实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...
- jquery插件-自由拖拽
最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...
- jQuery插件(拖拽)
拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- jquery插件之拖拽
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...
随机推荐
- 求一无序数组中第n大的数字 - 快速选择算法
逛别人博客的时候,偶然看到这一算法题,顺便用C++实现了一下. 最朴素的解法就是先对数组进行排序,返回第n个数即可.. 下面代码中用的是快速选择算法(不晓得这名字对不对) #include <v ...
- self和this的不同
在Java和C++中,this总是指的是当前实例地址,而在静态方法也就是类方法中,是不可以使用this的.在Objectvie-C中,self是既可以出现在实例方法中,也可以出现在类方法中,并且在不同 ...
- EditText判断用户输入完成,然后进行操作解决方案
private Timer timer = new Timer(); private final long DELAY = 1000; // in ms EditText editTextStop = ...
- WordPress插件制作教程概述
接下来的一段时间里,开始为大家讲解WordPress插件制作系列教程,这篇主要是对WordPress插件的一些介绍和说明,还有一些我们需要注意的地方,以及需要掌握的知识. WordPress插件允许你 ...
- C++之------构造函数
创建一个对象时,常常需要作某些初始化的工作,例如对数据成员赋初值. 类的数据成员是不能在声明类时初始化的. class Time { public : //声明为公用成员 hour; minute; ...
- Mac OSX下面的博客客户端Marsedit使用
在windows下面,有一个很好用的博客客户端,叫做windows live writer,不得不感叹,其所见即所得的方面真的是很方便,特别是还可以方便的把word上的内容直接帖上去,包括文件中 ...
- css清除浮动解决方案
清除浮动包括清除子元素的浮动和清除上级元素的浮动,其中清除上级元素的浮动,只需设置clear为both就可以了,而清除子元素的浮动则可以用空标签法.clearfix方法或overflow方法.因清除上 ...
- bzoj3407 [Usaco2009 Oct]Bessie's Weight Problem 贝茜的体重问题
Description 贝茜像她的诸多姊妹一样,因为从约翰的草地吃了太多美味的草而长出了太多的赘肉.所以约翰将她置于一个及其严格的节食计划之中.她每天不能吃多过H(5≤日≤45000)公斤的干 ...
- web api\ protobuf \formatter
9:50:20吴X2014/11/7 9:50:20 9:55:14吴X2014/11/7 9:55:14webapi实现protobuf吴X2014/11/7 9:56:29http://www.s ...
- 运用 BoxLayout 进行 Swing 控件布局
摘自http://www.cnblogs.com/fnlingnzb-learner/p/6008572.html 运用 BoxLayout 进行 Swing 控件布局 对于初学 Java Swing ...