<!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. [算法][LeetCode]Linked List Cycle & Linked List Cycle II——单链表中的环

    题目要求 Linked List Cycle Given a linked list, determine if it has a cycle in it. Follow up: Can you so ...

  2. Moto C118 基于 Osmocom-BB 和 OpenBTS 搭建小型GSM短信基站

    此文章PDF文档下载地址:点击下载 0x00 写在前面 大家应该都听说过摩托罗拉C118配合Osmocom-BB实现GSM网络下的短信拦截功能吧,在14年左右新出了一种玩法就是Osmocom-BB的s ...

  3. 1122MySQL性能优化之 Nested Loop Join和Block Nested-Loop Join(BNL)

    转自http://blog.itpub.net/22664653/viewspace-1692317/ 一 介绍  相信许多开发/DBA在使用MySQL的过程中,对于MySQL处理多表关联的方式或者说 ...

  4. logback 配置详解

    一:根节点<configuration>包含的属性: scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文 ...

  5. 【51Nod 1622】【算法马拉松 19C】集合对

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1622 简单题..直接暴力快速幂 #include<cstdio&g ...

  6. Dirac Delta Function

    也称为Degenerate pdf, 退化概率密度函数. 未经考证的解释是: 当正态分布的\(\sigma \to 0\)时, 正态分布就退化为这个分布了. 定义 \[ \delta(x) = \be ...

  7. Don’t Use Accessor Methods in Initializer Methods and dealloc 【初始化和dealloc方法中不要调用属性的存取方法，而要直接调用 _实例变量】

    1.问题:    在dealloc方法中使用[self.xxx release]和[xxx release]的区别? 用Xcode的Analyze分析我的Project,会列出一堆如下的提示:Inco ...

  8. 下载imagenet2012数据集

    摸索了一下,imagenet2012下载,跟大家分享一下 用迅雷会员加速都可以下载,有的用百度云也可以离线下载 http://www.image-net.org/challenges/LSVRC/20 ...

  9. python 批量扫描mongodb 未授权访问脚本

    需要 pymongo库easy_install pymongo脚本: import socket import sys import pymongo ipcons = [] def Scanner(i ...

  10. NOIp2016 十连测 round1

    Claris大爷出的一套模拟题.问别人要到了一份题,加深了自己NOIp要滚粗的感觉. Matser zzDP题,我只能说我第一遍写的时候还写崩了QAQ. //master //by Cydiater ...