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. python正则表达式--编译正则表达式re.compile

    编译正则表达式-- re.compile 使用re的一般步骤是先将正则表达式的字符串形 式编译为pattern实例,然后使用pattern实例处理文本并获取匹配结果(一个Match实例(值为True) ...

  2. 《剑指offer》二叉搜索树和双向链表

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  3. 在Pythonfor循环中如何获取循环次数？

    在Python的for循环里,循环遍历可以写成: for item in list: print item 它可以遍历列表中的所有元素,但是有什么方法可以知道到目前为止我循环了多少次? 想到的替代方案 ...

  4. Knockout案例： 全选

  5. Resharper 详细教程

    前言 注:本文部分内容转载自:http://www.cnblogs.com/luminji/p/3285505.html 原文中部分快捷键在8.2版本中不适用,我已改正,并用红色标注出来 在线API: ...

  6. 会话技术、Cookie技术与Session技术

    一.会话技术  1. 存储客户端状态 会话技术是帮助服务器记住客户端状态(区分客户端)的.  2. 会话技术 从打开一个浏览器访问某个站点,到关闭这个浏览器的整个过程,称为一次会话.会话技术就是记录这 ...

  7. WEB测试重点

    1.功能测试:所实现的功能是否和需求一致:2.界面测试:界面是否美观,风格是否一致,文字内容是否正确:3.链接测试:打开链接速度是否合理:是否链接到正确的页面:是否有空白页面:4.性能测试:系统能支持 ...

  8. selenium之使用chrome浏览器测试（附chromedriver与chrome的对应关系表）

    https://www.cnblogs.com/JHblogs/p/7699951.html

  9. vw实现移动端自适应页面

    一.设备支持情况 测试网站:https://caniuse.com/#search=vw css3test:https://airen.github.io/css3test/,https://gith ...

  10. Linux和window的区别

    免费与收费 最新正版Windows10官方售价￥888 Linux几乎免费(更多人愿意钻研开源软件,而收费的产品出现更多的盗版) 软件与支持 Windows平台:数量和质量的优势,补过大部分为收费软件 ...