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菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...
随机推荐
- php 出现 500 Internal Server Error错误问题解决
set_time_limit(0); //设置超时时间 chmod 777 filename //设置文件权限 问题根本不在这,读取数据太多,数组是很站内存的. 内存设置大些就ok了 ini_set( ...
- java 数字补齐0
String str_f = str.substring(0, 1); int i = (Integer.parseInt(str.substring(1)) + 1); // 数字补齐0 Decim ...
- 第一章——第三节 intent的匹配原则
问题 一.三种匹配原则 二.匹配的原理 三.隐式启动Activity,如何判断跳转的Activity是否存在. 判断Intent是否可行的两种办法.
- ZOJ 3745 Salary Increasing
Description Edward has established a company with n staffs. He is such a kind man that he did Q time ...
- information_schema.partitions 学习
1.partitions 表中的常用列说明: 1.table_schema:表所在的数据库名 2.table_name:表名 3.partition_method:表分区采用的分区方法 4.parti ...
- Monkey学习笔记<四>:Monkey服务器命令
#使用如下命令将本地pc和手机连接起来 adb shell monkey --port 1080 adb forward tcp 1080:tcp 1080 telnet localhost 1080 ...
- php版权重轮询调度算法
2013-09-25 <?php class WeightedRoundRobin { private static $_weightArray = array(); private stati ...
- hdu 1208 Pascal's Travels
http://acm.hdu.edu.cn/showproblem.php?pid=1208 #include <cstdio> #include <cstring> #inc ...
- github page使用
github page介绍: https://help.github.com/categories/20/articles 使用GitHub Pages建立博客 与GitHub建立好链接之后,就可以方 ...
- 007.androidUI开发进阶(基础--案例) .
1.Dialog有四种,分别是AlertDialog,ProgressDialog,DatePickerDialog,TimePickerDialog 1.1AlertDialog public cl ...