<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>可拖动的便笺</title>

    <link rel="stylesheet" href="./css/index.css" />

  </head>

  <body>

    <div class="note">

      <div class="move-bar"></div>

      <div class="content" contenteditable="">

        <p>这是一个便笺</p>

        <p>里面的文字可以更改</p>

        <p>用鼠标按住顶部的移动条即可拖动便笺</p>

      </div>

    </div>

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

  </body>

</html>
// 让便签可被拖动，但不能超出视口

var note = document.querySelector('.note');

var moveBar = document.querySelector('.move-bar');

moveBar.onmousedown = function(event){

    var startX = event.clientX; //鼠标按下的开始 离视口的左边位置

    var startY = event.clientY;//鼠标按下的开始 离视口的头部位置

    var noteRect = note.getBoundingClientRect();

    console.log(noteRect)

    console.log(note.clientWidth)

    console.log(note.clientHeight)

    var maxX = document.documentElement.clientWidth - note.clientWidth;

    var maxY = document.documentElement.clientHeight - note.clientHeight;

    window.onmousemove = function(e){

        var endX = e.clientX;//鼠标移动 离视口的左边位置

        var endY = e.clientY;//鼠标移动 离视口的头部位置

        var offsetX = endX - startX; //最终的偏移量

        var offsetY = endY - startY; //最终的偏移量

        var left = noteRect.left + offsetX;

        var top = noteRect.top + offsetY;

        if(left < 0){

            left = 0

        }

        if(top<0){

            top = 0

        }

        if(left > maxX){

            left = maxX;

        }

        if(top > maxY){

            top = maxY;

        }

        // note.style.left = noteRect.left + offsetX + 'px';

        // note.style.top = noteRect.top + offsetY + 'px';

        note.style.left = left + 'px';

        note.style.top = top + 'px';

        console.log("startX:"+startX,"startY"+startY,"endX:"+endX,"endY:"+endY,"offsetX:"+offsetX,"offsetY:"+offsetY);

        console.log("left:"+left,"top:"+top);

    }

    window.onmouseup = function(){

        //鼠标抬起时清除事件

        window.onmousemove = null;

        window.onmouseup = null;

    }

}

原生js元素拖动效果的更多相关文章

  1. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  2. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

  3. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  4. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  5. 原生JS元素怎么取消事件

    关于原生JS元素怎么取消事件,有3种方式 常规方法:removeEventListener 案例: <body> <div id="myDIV"> div ...

  6. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  7. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  8. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  9. 原生js实现拖动滑块验证

    拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

  10. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...

随机推荐

  1. Mysql高可用架构方案

    目录 Mysql 介绍 高可用结构 主从模式 主从模式介绍 主从复制技术 主从模式注意事项 MHA(MasterHighAvailability) MHA模式介绍 MHA工作流程 MMM(Multi- ...

  2. 从0搭建一个FIFO模块-01（基础知识）

    1. FIFO介绍 基本概念 FIFO(First In, First Out)是一种常用的数据结构,用于存储和处理数据.它的工作原理与排队的顺序类似,遵循"先进先出"的原则.即, ...

  3. 鸿蒙hvigor构建任务依赖与生命周期简介

    Hivgor脚本文件 在构建的生命周期中Hvigor使用两个脚本文件来完成插件.任务以及生命周期hook的注册: hvigorconfig.ts:此文件在整个项目中只有根目录下存在一份,不是构建必须的 ...

  4. SoftReference,WeakReference&WeakHashMap

    zz http://java.chinaitlab.com/oop/716371.html 在JDK1.2以前的版本中,当一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有对象处于 ...

  5. Docker之修改默认存储路径

    背景:Docker 默认安装的情况下,会使用 /var/lib/docker/ 目录作为存储目录,用以存放拉取的镜像和创建的容器等.不过由于此目录一般都位于系统盘,遇到系统盘比较小,而镜像和容器多了后 ...

  6. Graylog之安装

    Graylog是一个开源的日志聚合.分析.审计.展现和预警工具.功能上和ELK类似,但又比ELK要简单,依靠着更加简洁,高效,部署使用简单的优势很快受到许多人的青睐 安装部署: 单机部署,最小化部署 ...

  7. Mybatis【12】-- Mybatis多条件怎么查询？

    很多时候,我们需要传入多个参数给sql语句接收,但是如果这些参数整体不是一个对象,那么我们应该怎么做呢?这里有两种解决方案,仅供参考. 1.将多个参数封装成为Map 测试接口,我们传入一个Map,里面 ...

  8. H5C3时钟实例(rem适配)

    1.原理分析和效果图 先上效果图: 屏幕适配上使用rem适配,假设用户的手机屏幕最下宽度是375px,而谷歌浏览器最小的字体大小为12px,所以我以375px为标准尺寸进行rem适配,即375px的屏 ...

  9. .NET 使用 ZXing.Net 生成二维码，并识别

    .NET 使用 ZXing.Net 生成二维码,并识别 前言 前面已经分享给很多创建二维码,条形码...等一系列的方式 各有优缺点,暂时不做评价.今天推荐ZXing.Net .也是比较全面的一种方式, ...

  10. vue-elementui 因滚动条引发的table错位问题

    修复后效果 在网上看到的方法都是设置样式属性,试过之后也不生效,也不知道原因 所以就自己用原生js解决了,代码如下 //修错位 x(){ var u = document.getElementsByC ...