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菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...
随机推荐
- 豆瓣FM duilib版
最近duilib项目被复制到了github上,仿佛又多了些活力.想要总结以前的项目的同时因为很喜欢豆瓣的FM,所以打算做个duilib版本豆瓣FM. 在网上了看到了很多豆瓣的不同版本,node.js. ...
- 《javascript高级程序设计》笔记4.1.4:检测类型
javascript类型检测这节主要讲了typeof和instanceof操作符. 一.typeof操作符: 1.typeof在检测基本数据类型时十分方便,针对4种基本数据类型string.numbe ...
- python3.4 伪装成浏览器获取页面信息失败
最近学了下网络爬虫,打算从一个网站上提取点东西,自己练练手,刚开始还从这个网站上取了正确的html,后来百般尝试还是不能取正确的html,希望能得到大家的帮助~ 我刚开始的代码是: 1 url=&qu ...
- jquery.fn.extend与jquery.extend(转)
jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend( ...
- [分享]我的LABVIEW快速开发串口测试软件实例
LABVIEW是美国国家仪器公司(National Instruments,简称NI)的创新产品,它允许编程人员使用图形方式来进行编程,摒弃了艰涩难懂的代码,只需要拖动相应图形控件然后连线,进行简单的 ...
- TCLP 第一章 1.5字符输入输出
#include <stdio.h> /* 将输入复制到输出:版本1 */ int main() { int c; /* 注意是int而不是char,除了存储char类型字符,还要存储EO ...
- linux环境下deb格式文件转换成rpm格式
以 alien_8.87.tar.gz 为例: 下载.安装 alien_8.87.tar.gz [root@shyn ~]# wget http://ftp.de.debian.org/debian/ ...
- USB系列之八:透过ASPI执行SCSI命令
在<USB系列之七>里我们介绍了ASPI的规范,并对一系列ASPI的命令做了测试,其中的02号命令是执行SCSI命令,我们专门在这篇文章中介绍,在<USB系列七>中,我们已经了 ...
- android 中FragmentActivity中模拟返回键返回上一个Activity效果
FragmentTransaction中先加入一个Fragment,这个Fragment就是当前要显示的Fragment, 当通过事件触发显示第二个Fragment时,在加入第二个Fragment并调 ...
- bzoj1675 [Usaco2005 Feb]Rigging the Bovine Election 竞选划区
Description It's election time. The farm is partitioned into a 5x5 grid of cow locations, each of wh ...