<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>

<style>
.circle{width: 100px; height: 100px; background: red; position: absolute; border-radius:50px;}
</style>
<script src='../jquery-3.1.1.min.js'></script>
<script>
$(function(){
var disX=0;
var disY=0;
$('div').mousedown(function(ev){

disX=ev.pageX-$(this).offset().left;
disY=ev.pageY-$(this).offset().top;
$(document).mousemove(function(ev){
$('div').css('left', ev.pageX-disX);
$('div').css('top', ev.pageY-disY);

});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
});
</script>
</head>
<body>
<div class="circle">
</div>

</body>
</html>

jquery-简单拖拽代码的更多相关文章

  1. jquery实现拖拽以及jquery监听事件的写法

    很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...

  2. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  3. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

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

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

  5. 原生弹窗拖拽代码demo+简单的抽奖

    拖拽效果 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. jquery 可拖拽的窗体控件实现代码

    引入JQUERY框架.把这个控件代码放到一个js文件里面直接引入就可以了控件代码 $.fn.myDrag = function() { var self = $(this); self.css(&qu ...

  7. 简单的JQuery完美拖拽

    首先导入jq库,最好是1.0版本的.调用函数时,传入要拖拽元素的id值. function drag(sel){ $div = $("#"+sel); $div.mousedown ...

  8. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  9. JQuery之拖拽插件

    一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...

  10. jquery 模块拖拽

    这是模块拖拽Javascript代码 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(".drag" ...

随机推荐

  1. 去除多余的cell 和最后一行cell显示顶头底线

    去除多余cell YourTableview.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero]; 最后一行cell底线顶头显示 s ...

  2. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 主管可以看下属的数据

    主管可以看下属的数据,这个是经常用到的一个权限,不管是大公司,还是小公司都需要的功能. 通过以下2个方法,可以任意达到想要的效果了,设置简单灵活,还能递归运算下属,有时候简单好用就是硬道理. #reg ...

  3. Win7下mysql root账户登录提示：ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)解决方案

    ERROR 1045 (28000): Ac-- password: YES)这个意思是密码不正确,那就修改密码: 如果你是服务器是 windows xp/2000/2003/nt 都可以使用这个方法 ...

  4. golang---文件读写

    func Create(name string) (file *File, err error) 直接通过纹面创建文件 func NewFile(fd uintptr, name string) *F ...

  5. .Net Core Linux centos7行—安装nginx，运行静态网站

    使用编译安装方式安装nginx Nginx下载地址:http://nginx.org/en/download.html.下载Stable version(稳定版就好).当前稳定版:http://ngi ...

  6. table寻找兄弟列的值

    function showCover(videoidtemp,curRow){ // curRow为当前元素.寻找当前元素的父元素,寻找父元素中class为tdd的元素..html() 是单元格td中 ...

  7. Sigmaplot 13 破解版什么地方可以下载

    SigmaPlot是一款专业的科学绘图软件,可用于绘制准确.高质量的图形和曲线,支持一百多种2D.3D科学图形,同时拥有强大的数据统计分析功能.现在网络不断发展,软件使用日益频繁,今天小编就和大家分享 ...

  8. eclipse导入第三方jar包进入web项目的方法

    此方式是没有用maven进行构建的项目,纯动态项目. 具体方法: 1.通过Java Build Path导入. 比如我项目上要用servlet-api.jar这个包,我所用的web容器是tomcat, ...

  9. java环境配置

    一.下载安装sdk jdk和jre的区别: jdk:是编译环境(编译器),把java文件编译成class文件 jre:是运行环境(运行器),执行class文件需要使用jre eclipse开发出jav ...

  10. linux 下向github上传代码

    上传代码: cd TPS/devices/M8 git init                      #//初始化 git add .                    #如果是.表示上传全 ...