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菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...
随机推荐
- 前端学习书籍大全 包含PDF地址
JavaScript类: javascript高级程序设计 pdf下载 ---->教程 javascript权威指南 pdf下载 ---->教程 javascript基础教程 pdf下载 ...
- CSS浏览器兼容问题集-第一部分
CSS对浏览器的兼 容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于 web2.0的过度,请尽量用xhtm ...
- linux curses函数库
fedora20,安装yum install ncurses-devel 编译时:-lncurses 头文件:#include<curses.h> 参考:man ncurses \linu ...
- information_schema.collations 学习
information_schema.collations 表中的每一行对应一个排序规则 1.information_schema.collations 表中学用列: 1.id :排序规则的ID 2. ...
- Eclipse中设置条件断点
1.在要添加断点的变量那一行前双击,添加断点: 2.在该断点处点击鼠标右键,在弹出的选项卡中选择“断点属性”Breakpoint Properties; 3.在断点属性选项卡中勾选Enabled复选框 ...
- 移动端h5页面写法
1. 页面宽度320, 所有元素尺寸设一半 缺点:不自能适应全屏 2.页面宽度640,元素尺寸正常 <meta charset="utf-8" /> <meta ...
- Linux APP源码级编译安装
首先需要了解下tar包. 以下文章作出解释了: http://www.cnblogs.com/laipDIDI/articles/2214270.html http://baike.baidu.com ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- java数组复制的方式和效率比较
java中,数组的复制有以下三种方式: 1. 调用System.arraycopy(Arrays.copyOfRange可以当作第四种,但是底层调用的是System.arraycopy,所以,认为是同 ...
- location.href IE6 下不起作用的罪魁祸首
解决问题 在btn_publish函数内逻辑最后面加:return false;