首页 > 其他分享 >前端拖拽的简单实现

前端拖拽的简单实现

时间:2022-09-04 10:22:46浏览次数:48  
标签:function clientX 前端 拖拽 let 简单 document box1 event

鼠标按下拖动松开时鼠标的位置分析:

 

 

<!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>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
      width: 100%;
    }
    #box1 {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }
  </style>
  <body>
    <div id="box1"></div>
  </body>
  <script type="text/javascript">
    window.onload = function () {
      let box1 = document.getElementById("box1");

      box1.onmousedown = function (e) {
        console.log(e.clientX, box1.offsetLeft);
        //div的偏移量.clientX - 元素.offeetLeft
        let ol = e.clientX - box1.offsetLeft;
        let ot = e.clientY - box1.offsetTop;

        // 给document绑定一个onmousemove事件
        document.onmousemove = function (event) {
          event = event || window.event;
          let left = event.clientX - ol;
          let top = event.clientY - ot;

          //修改box1的位置
          box1.style.left = left + "px";
          box1.style.top = top + "px";
        };

        document.onmouseup = function () {
          document.onmousemove = null;

          document.onmouseup = null;
        };
      };
    };
  </script>
</html>

  

标签:function,clientX,前端,拖拽,let,简单,document,box1,event
From: https://www.cnblogs.com/malong1992/p/16654400.html

相关文章

  • c# 第三章 一个简单的程序
    3.1一个简单的c#程序 SimpleProgram: usingSystem;//using和include似乎有点类似,而System就相当于被引入的库namespaceSimple//似乎有点像c++的usingnames......
  • 前端学习各种问题以及解决方法的记录
    问题描述:div宽度溢出问题,div设置margin和padding后宽度出现溢出。解决方式:css中添加如下代码:*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box......
  • 【前端特效】程序员给你的专属告白,快来转发给你心爱的那个她吧!
    【前端特效】程序员给你的专属告白,快来转发给你心爱的那个她吧!点击打开视频讲解更加详细<template><divclass="content"><imgsrc="../assets/live.gif"alt="......
  • 16.web-简单功能分析-静态资源访问
    1、静态资源目录只要静态资源放在类路径下:called /static (or /public or /resources or /META-INF/resources访问:当前项目根路径/+静态资源名 原理:静......
  • NC16544 简单环
    题目链接题目题目描述给定一张n个点m条边的无向图,求出图中所有简单环的数量。(简单环:简单环又称简单回路,图的顶点序列中,除了第一个顶点和最后一个顶点相同外,其余顶点不......
  • Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
    33、JS基础-ajax_post截止目前,完成了登录,创建和删除,“编辑”这块还是老的信息。打开a、点击编辑=>(内容)=>dialogb、内容=>后端ajax 页面上遍历用户时......
  • 算法-小红书2020校招前端笔试题卷三
     薯队长写了一篇笔记草稿,请你帮忙输出最后内容。 1.输入字符包括,"("    ,    ")"    和    "<"和其他字符。 2.其他字符表示笔记内容。 3.()之间......
  • 【C++】C++ qt 与 python 简单进程通讯
    前言准备用C++写一个简单的文字转语音的小东西,对C++qt这个怎么弄不太清楚(现在看到qt5.8后有个叫QTextToSpeech的东西),发现python调用一些库来进行文字转语音的发声比较简......
  • 一款好用免费的前端刷题小程序
    今天给大家安利一款免费好用的前端刷题小程序,5G面试宝典首先打开小程序,映入眼帘的是简洁大方的界面。系统分成了五大功能区,分别是首页,文章,我的错误,排行榜,以及我的。再细分......
  • 简单加载器——分步指南
    简单加载器——分步指南HTML对于HTML,我们将只有一个带有“loader”类的div元素。<divclass="loader"></div>CSS我们只需根据需要设置宽度和高度,边框半径为50%......