案例：简易的Div拖拽

鼠标移入Div区域后，按下鼠标左键，可以拖动Div移动;松开鼠标左键，Div拖动停止。同时要求Div不能拖出屏幕显示区域外。

拖拽原理：距离不变、三个事件(onmousedown、onmousemove、onmouseup)

解决问题：

1、拖拽过程中，鼠标容易滑出Div区块；

2、防止Div拖出页面：修正位置；

3、解除绑定事件：鼠标左键抬起后，Div不再随着鼠标移动而发生位置变化；

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>习题-拖拽Div滑块</title>

    <style>

        * {

            margin: 0;padding: 0;

        }

        div {

            width: 100px;

            height: 100px;

            margin-bottom: 0px;

            background-color: purple;

            position: absolute;

        }

    </style>

    <script>

        window.onload = function () {

        //此处写代码

}

    </script>

</head>

<body>

    <div id='div1'></div>

</body>

</html>

　　参考代码：

function getPos(ev) {

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

    return { x: ev.clientX + scrollTop, y: ev.clientY + scrollLeft };

}

var oDiv = document.getElementById('div1');

var disX = 0;

var disY = 0;

oDiv.onmousedown = function (ev) {

    var oEvent = ev || event;

    disX = getPos(oEvent).x - oDiv.offsetLeft;

    disY = getPos(oEvent).y - oDiv.offsetTop;

    document.onmousemove = function (ev) {

        var oEvent = ev || event;

        var l = oEvent.clientX - disX;

        var t = oEvent.clientY - disY;

        if (l < 0) {

            l = 0;

        } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {

            l = document.documentElement.clientWidth - oDiv.offsetWidth;

        }

        if (t < 0) {

            t = 0;

        } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {

            t = document.documentElement.clientHeight - oDiv.offsetHeight;

        }

        oDiv.style.left = l + 'px';

        oDiv.style.top = t + 'px';

    }

    document.onmouseup = function () {

        document.onmousemove = null;

        document.onmouseup = null;

    }

    return false;

}

　　

案例：简易的Div拖拽的更多相关文章

  1. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  2. 实现Div拖拽

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

  3. html之div拖拽，html5拖拽

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

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

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

  5. 纯js实现DIV拖拽

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

  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端) ...

随机推荐

  1. layui+tp5表单提交回调

    layui 前段页面form表单提交数据如果监听表单提交 ,tp5后台操作完成后使用 $this->success('success'); 后前端的页面不会出现layui的layer弹窗提示su ...

  2. 虚拟主机和ECS的选择——有的坑你可以不躺，有的钱你可以不花（一）

    一直想做网站,由于最开始虚拟主机有优惠,所以三年前买了虚拟主机,后来一直续费,间歇性使用过,发现很多功能都不行​. 昨天准备买新的,然后想起学生购买有优惠,于是开始了学生认证之旅​. 首先,看一下之前 ...

  3. MeteoInfoLab脚本示例：站点数据绘制等值线

    站点数据绘制等值线需要首先将站点数据插值为格点数据,MeteoInfo中提供了反距离权法(IDW)和cressman两个方法,其中IDW方法可以有插值半径的选项.这里示例读取一个MICAPS第一类数据 ...

  4. 四年了自学了C/C++那么久，还写不出项目，正常吗？

    前言: 这是之前在V2EX职场话题里看到的一个话题,类似的小编身边人呢也有相似的困扰. 现在大学里基本都开设了计算机课程,看了那么多相关知识性的书,但学了四年出来,仍然写不出项目,这肯定是有问题的. ...

  5. 分布式锁结合SpringCache

    1.高并发缓存失效问题: 缓存穿透: 指查询一个一定不存在的数据,由于缓存不命中导致去查询数据库,但数据库也无此记录,我们没有将此次查询的null写入缓存,导致这个不存在的数据每次请求都要到存储层进行 ...

  6. 【暑假集训】HZOI2019 水站 多种解法

    题目内容 已知有一个\(n\)层的水站: \(W_i\)表示未操作之前第\(i\)层的已有水量: \(L_i\)表示第\(i\)个水站能够维持或者储存的水的重量: 表示在第\(P_i\)层进行减压放水 ...

  7. spring boot:使用poi导出excel电子表格文件(spring boot 2.3.1)

    一,什么是poi? 1,poi poi是用来兼容微软文档格式的java api, 它是apache的顶级项目之一, 也是我们在生产环境中导出excel时使用最多的库 2,poi官方网站: http:/ ...

  8. gti 常用命令

    git add 文件 : 追踪指定文件git add . :追踪所有的文件git commit -m "注释" : 提交报本地仓库git push : 推送远程仓库git pull ...

  9. Redis Hashes 数据类型简述

    Redis Hashes 是我们日常使用中比较高频的 Redis 数据类型,内部使用 Redis 字典结构存储,底层基于哈希表结构实现. 下面从哈希表节点,哈下表结构,Redis 字典,Redis 字 ...

  10. Java 悲观锁 synchronized （member）{代码块}

    Java 如果遇到会出现高并发的情况,一般建议使用悲观锁 :synchronized (member){代码块}  需要对数据库进行修改或新增的时候,建议写上事务--@Transactional @T ...