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. WPF 杂记

    1,跨屏最大化 单屏幕的时候我们可以设置 WindowState 来使应用最大化 当接多个屏幕的时候,就需要下面这个设置: private void FullScreen() { this.Windo ...

  2. 根据token分割字串

    #include <iostream> #include <string> #include <cstring> int main() { const char * ...

  3. HRBUST 1181 移动 bfs模板

    #include<bits/stdc++.h>///该头文件为万能头文件,有些学校oj不能使用,读者可根据需要自行修改 using namespace std; ; int vis[MAX ...

  4. Python 地点转化为经纬度

    1.geopy包下载地点https://pypi.python.org/pypi/geopy 2.安装步骤            运行cmd,切换到D:/python/geopy-1.11.0/目录下 ...

  5. Mouse w/o Borders实现两台主机共用一套键鼠方法及问题处理

    因为经常遇到同时用到实验室配备的主机和自己的笔记本同时使用的场景,两台设备需要切换两套键鼠很麻烦,这里介绍一个微软开发的一个免费软件Microsoft Garage Mouse without Bor ...

  6. visual studio的包含目录配置问题

    早上将一个项目从debug x64修改到release x64,然后包含目录都是直接从debug拷贝过来的,一模一样的路径,一直说无法include,并且路径中的文件都是存在的,配置页面的releas ...

  7. UIdynamic系列认知

    1.刚上来就遇到的大坑 按照前辈们的代码码上了一段重力效果,结果不管怎么折腾都没有任何效果,不由心塞. 开始怀疑是不是模拟器不支持呀?是不是必须拖动到视图上的空间才可以呀? 结果试了各种方法还是没效果 ...

  8. __x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block

    1. 块元素block 独占一行的元素 一般使用块元素包含内联元素,用作页面布局 <a> 标签可以包含任何除了a标签以外的元素 <p> 标签不能包含块元素 h1... ...h ...

  9. [LeetCode] Custom Sort String 自定义排序的字符串

    S and T are strings composed of lowercase letters. In S, no letter occurs more than once. S was sort ...

  10. 使用Java客户端操作elasticsearch（二）

    承接上文,使用Java客户端操作elasticsearch,本文主要介绍 常见的配置 和Sniffer(集群探测) 的使用. 常见的配置 前面已介绍过,RestClientBuilder支持同时提供一 ...