html

<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>divDrag</title>

　　　　<style>

　　　　　　#div1{

　　　　　　　　width: 300px;

　　　　　　　　height: 300px;

　　　　　　　　background-color: #ccc;

　　　　　　　　/*一定要绝对定位*/

　　　　　　　　position: absolute;

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div id="div1" class="box"></div>

　　　　<script src="drag.js"></script>

　　</body>

</html>

//js面向过程式写法

window.onload = function(){

　　var div1 = document.getElementById("div1");

　　div1.onmousedown = function(ev){

　　　　var oevent = ev || event;

　　　　var distanceX = oevent.clientX - div1.offsetLeft;

　　　　var distanceY = oevent.clientY - div1.offsetTop;

　　　　document.onmousemove = function(ev){

　　　　　　var oevent = ev || event;

　　　　　　div1.style.left = oevent.clientX - distanceX + 'px';

　　　　　　div1.style.top = oevent.clientY - distanceY + 'px';

　　　　};

　　　　document.onmouseup = function(){

　　　　　　document.onmousemove = null;

　　　　　　document.onmouseup = null;

　　　　};

　　;

};

jquery
$('.box').mousedown(function(ev) {
    var oevent = ev || event;
　　var distanceX = oevent.clientX - oevent.currentTarget.offsetLeft;
　　var distanceY = oevent.clientY - oevent.currentTarget.offsetTop;
  $(document).mousemove(function(ev) {
        var oevent = ev || event;
        $('.box').css('left', oevent.clientX - distanceX + 'px');
         $('.box').css('top', oevent.clientY - distanceY + 'px');
    });
    $(document).mouseup(function(ev) {
        $(document).unbind('mousemove');
        $(document).unbind('mouseup');
    });

})

div 拖拽的更多相关文章

  1. 实现Div拖拽

    直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...

  2. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

  3. 运用DIV拖拽实现resize和碰撞检测

    运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...

  4. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  5. 案例：简易的Div拖拽

    案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...

  6. html --- javascript --- div --- 拖拽方块

    当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...

  7. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  8. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

  10. jquery实现div拖拽

    1.引入jquery1.8.3 ,模块拖拽js代码: //模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(& ...

随机推荐

  1. switch case 遇到判断type分支的写法

    一叶障目,没有接触到的知识点真是太多了...... 最近项目里需要用到一个小工具,就用winform写了一个出来,然后需要一个功能就是清空控件内容,我这个工具就用到了textbox和combobox, ...

  2. C语言学习及应用笔记之六：C语言extern关键字及其使用

    在C语言中,修饰符extern用在变量或者函数的声明前,用来以标识变量或者函数的定义在别的文件中,提示编译器遇到此变量或者函数时,在其它文件中寻找其定义.extern关键字的用法有几种,我们下面对其进 ...

  3. docker部署项目 <三>

    使用docker运行一个控制台项目,新建一个控制台测试项目 一.安装mono,直接在网易镜像中心找下载路径 docker pull hub.c..com/library/mono:latest 二.安 ...

  4. git 切换远程仓库，以及碰到的一个问题。

    git 切换远程仓库出现如下问题: $ git checkout -b localdev origin/dev fatal: Cannot update paths and switch to bra ...

  5. 解决git反复输入密码的问题

    打开git命令面板 cd到项目根目录 $ git config --global credential.helper store然后只输入一次密码,后面就不需要了

  6. k-近邻算法概述

    2.1 k-近邻算法概述 k-近邻算法采用测量不同特征值之间的距离方法进行分类. 优点:精度高.对异常值不敏感.无数据输入假定. 确定:计算复杂度高.空间复杂度高. 适用数据范围:数值型和标称型. 工 ...

  7. http动词解释及规范

    GET:GET用于信息获取,而且应该是安全的和幂等的. 安全的意味着该操作用于获取信息而非修改信息,不管进行多少次操作,资源的状态都不会改变. 幂等的意味着对同一URL的多个请求应该返回同样的结果. ...

  8. Lesnoe Ozero 2016. BSUIR Open 2016 Finals

    A. Street magic 数位DP,设$f[i][j][k]$表示从低到高考虑$x$的后$i$位,$x$和$m$大小关系为$j$,和$n$大小关系为$k$的方案数. #include<cs ...

  9. C++ STL常用容器浅析

    首先要理解什么是容器,在C++中容器被定义为:在数据存储上,有一种对象类型,它可以持有其它对象或指向其它对象的指针,这种对象类型就叫做容器.简单来说 容器就是包含其他类的对象们的对象,当然这种(容器) ...

  10. [TopCoder]棍子

    题目描述 你有一堆棍子.每个木棒的长度是一个正整数. 你想要一组棍子所有的棍子都有相同的长度.您可以通过执行零个或多个步骤来更改当前集合.每个步骤必须如下所示: 你选择一根棍子.所选棒的长度必须至少为 ...