<!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>Document</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    .app {

      width: 100%;

      height: 100%;

      background-color: lightblue;

      position: absolute;

      display: flex;

      justify-content: center;

      align-items: center;

    }

    #main {

      width: 300px;

      height: 200px;

      background-color: white;

      z-index: 999;

      position: absolute;

    }

    #main:hover {

      cursor: move;

    }

  </style>

</head>

<body>

  <div class="app">

    <div id="main">

    </div>

  </div>

</body>

</html>

<script>

  let login = document.querySelector('#main');

  login.addEventListener('mousedown', (e) => {

    let x = e.pageX - login.offsetLeft

    let y = e.pageY - login.offsetTop

    document.addEventListener('mousemove', move)

    function move(e) {

      login.style.left = e.pageX - x + 'px';

      login.style.top = e.pageY - y + 'px';

    }

    //鼠标抬起，销毁鼠标移动事件

    document.addEventListener('mouseup', function () {

      document.removeEventListener('mousemove', move);

    })

  });

  console.log(login);

</script>

Js 实现登录框可拖动的更多相关文章

  1. js 拟写登录页 可以拖动登录框

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 拖动登录框 HTML+CSS+js

    先上效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. Discuz! X2.5判断会员登录状态及外部调用注册登录框

    Discuz! X2.5判断会员登录状态及外部调用注册登录框 有关discuz论坛会员信息,收集的一些资料: 用dedecms+discuz做了个门户加论坛形式的网站,但是dedecms顶部目前只能q ...

  4. javascript实例学习之三——类新浪微博的登录框

    该登录框和百度的搜索框类似,可以实现如下效果: 1.文字输入时自动弹出提示层 2,提示层根据输入文字进行自动过滤 3,提示层可以使用上下按键进行选择 4,提示层可以点击或者回车来确认输入 微博登录框h ...

  5. phpmyadmin 4.x 版本无法看到登录框的处理

    由于个人dreamhost即将到期问题,购买了一台VPS. 配置了一个CentOS 6.4 Linux 服务器,用Nginx+php-fpm搭建的环境. 这些都是废话,下面是重点: 当搭建后配置php ...

  6. JQuery+CSS3实现封装弹出登录框效果

    原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...

  7. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  8. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  10. 完美解决bootstrap模态框允许拖动后拖出边界的问题

    使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...

随机推荐

  1. kestrel网络编程--开发redis服务器

    1 文章目的 本文讲解基于kestrel开发实现了部分redis命令的redis伪服务器的过程,让读者了解kestrel网络编程的完整步骤,其中redis通讯协议需要读者自行查阅,文章里不做具体解析. ...

  2. 制作 Python Docker 镜像的最佳实践

    概述 ️Reference: 制作容器镜像的最佳实践 这篇文章是关于制作 Python Docker 容器镜像的最佳实践.(2022 年 12 月更新) 最佳实践的目的一方面是为了减小镜像体积,提升 ...

  3. 构建SpringCloud网关服务

    搭建网关 导入maven包: <!--网关依赖--> <dependency> <groupId>org.springframework.cloud</gro ...

  4. des_招标

    网站 aHR0cHM6Ly9jdGJwc3AuY29tLyMv 翻到第二页,加载了一个2,并且返回的都是加密的数据  点到initiator,可以看到发送的Axios请求,尝试全局搜索intercep ...

  5. 痞子衡嵌入式：对比恩智浦全系列MCU(包含Kinetis/LPC/i.MXRT/MCX)的GPIO电平中断设计差异

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦全系列MCU(包含Kinetis, LPC, i.MXRT, MCX)的GPIO电平中断设计差异. 在痞子衡旧文 <以i.M ...

  6. 网络编程 UDP套接字

    第十二章 UDP套接字 12.1 前言 上一章讲述了TCP通信方式,它是基于流的面向连接的网络通信.UDP是IP协议上的另一种传输协议. TCP和UDP都是端到端的通信协议,都处于TCP/IP网络模型 ...

  7. 4、PageHelper分页查询

    1.MyBatis的分页方式: 逻辑分页与物理分页 1.逻辑分页:使用MyBatis自带的RowBounds进行分页,是一次性查询很多数据,然后再在结果中检索分页的数据.这样做弊端是需要消耗大量的内存 ...

  8. [深度学习] ubuntu18.04配置深度学习环境笔记

    最近装过很多ubuntu18.04系统的nvidia驱动,cuda10.2,cudnn7.6.5,发现每次都会出现一些小问题.总结了具体步骤,做个记录.主要分为三个步骤:驱动安装,cuda安装,cud ...

  9. 物以类聚人以群分,通过GensimLda文本聚类构建人工智能个性化推荐系统(Python3.10)

    众所周知,个性化推荐系统能够根据用户的兴趣.偏好等信息向用户推荐相关内容,使得用户更感兴趣,从而提升用户体验,提高用户粘度,之前我们曾经使用协同过滤算法构建过个性化推荐系统,但基于显式反馈的算法就会有 ...

  10. 用云服务器搭建frp服务（超详细）

    初学.没有云服务器的时候总想着怎样才能让别人访问到自己的项目. 在查阅了百度,逛过了一些论坛之后,了解到了 内网穿透 这个词. 经过一番钻研,通过 手机 + KSWEB + 电脑 成功将内网服务映射出 ...