$.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 实现简单拖拽的更多相关文章

  1. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  2. jquery实现可拖拽的div

    由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...

  3. jquery 实现页面拖拽并保存到cookie

    实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...

  4. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  5. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

  6. jquery插件-自由拖拽

    最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...

  7. jQuery插件(拖拽)

    拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...

  8. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  9. jquery插件之拖拽

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...

随机推荐

  1. python中json的操作示例

    先上一段示例 # -*- coding: cp936 -*- import json #构造一个示例数据,并打印成易读样式 j = {} j["userName"]="a ...

  2. shell中的数学运算

    shell中要进行数学运算通常有3中方法: expr命令 比如 expr 1 + 6就会返回7,使用expr的缺点就是碰到乘法运算,或者加括号(因为它们在shell中有其他意义),需要使用转义,比如: ...

  3. ThinkPHP框架一

    1.1 框架的概念 框架其实就是可重用代码的集合,框架的代码是框架架构的代码,不是业务逻辑代码,框架代码保护类.方法.函数等等,框架代码按照一定的规则组合起来就形成了框架. 1.2 不使用框架开发的时 ...

  4. 第二章IPC——IPC与开启多进程

    问题 一.IPC ①.什么是IPC  ②.为什么要有IPC 二.多进程 ①.如何开启多进程  ②.系统如何创建多进程 三.多进程引发的问题 问:私有进程(利用":+进程名")能否共 ...

  5. c++基础五个题(三)

    一.一个对象访问普通函数和虚函数的时候,哪一个更快? 访问普通函数更快,因为普通成员函数在编译阶段已经被确定,因此在访问时直接调用对应地址的函数,而虚函数在调用时,需要首先在虚函数表中查找虚函数所在的 ...

  6. C++----练习--string输入输出

    1.要使用标准库中的string 类型.也要增加头文件 #include<string> 2.例子: #include<iostream> #include<string ...

  7. 使用ARM模板部署自动扩展的Linux VMSS(1)

    在Azure之前的ASM版本或者经典模式中,用户使用Azure Website,Azure Cloud Service等PAAS服务,可以实现一定程度上的自动扩展(auto scaling),但有着诸 ...

  8. LeetCode_Integer to Roman

    Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from 1 t ...

  9. 24c16读写驱动程序

    //////////////////////////////////////////////////////////////// //24c16读写驱动程序 // //模块调用: //读数据:read ...

  10. zend server 和zend studio安装

    zend server安装完后需要更改一个xml文件. 用记事本打开D:\Program Files\Zend\ZendServer\etc\ZendEnablerConf.xml文件. 将 锘??x ...