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 ...
- 添加jar
file->project structure->'+'添加jar 在.gradle中配置
- js戳和php戳时间换算
问题:剩余多少时间,如果只用php来输出,却看不到动态效果.解决办法,利用获取的时间减去当前时间js 时间格式转换php时间商品距离秒杀时间的天数时分秒<input name="tes ...
- automation studio 6.0 破解版 32位
破解软件在iso文件的patch目录下 链接:http://pan.baidu.com/s/1o8KR7rc 密码:y87g
- CentOS6下编译安装Python2.7.6方法
关于在CentOS6下编译安装Python2.7.6的方法非常的多了,小编以前也介绍过相关的文章了,下面一聚教程小编再来为各位介绍一下吧,希望文章能帮助到各位. CentOS下面Python在升级 ...
- 用IO流拷贝歌曲
package lianxi; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOEx ...
- 基于stm32f103zet6的FAT16文件系统学习1(初识FAT16)
有了之前读写block的基础之后,准备弄个文件系统,之前没有接触过这东西,所以有很多都晕晕的,但是看到fat的源代码之后还是挺有信心的,因为之前一直过uboot,所以这个文件当然是小巫见大巫了.首先来 ...
- MFC界面开发(QQ透明皮肤:多层算法,一键适配各种背景 )
http://blog.csdn.net/kent19900125/article/category/1368203/3 QQ透明皮肤:多层算法,一键适配各种背景 . http://blog.csdn ...
- jQuery_基础
一.jQuery与DOM对象的转换. 1.jQuery对象转换为DOM对象:$cr[0] 或 $cr.get(0) $cr为jQuery对象 2.DOM对象转换为jQuery对象:$(cr) cr为D ...
- 【转】Linux查看CPU和内存使用情况
=====================================top============================================== 在系统维护的过程中,随时可 ...