写一个可拖拽的盒子

最新推荐文章于 2023-12-15 11:30:46 发布
最新推荐文章于 2023-12-15 11:30:46 发布
阅读量99 收藏
点赞数
文章标签： css3 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49696014/article/details/122322658
版权 
<!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;
        }
        .box{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 300px;
            height: 150px;
            border: 1px solid #ccc;
        }
        .header{
            width: 100%;
            height: 50px;
            background-color: pink;
        }
        .main{
            background-color: purple;
        }
    </style>
</head>
<body>
   <div class="box">
       <div class="header">头部区域</div>
       <div class="main">
           内容区域
       </div>
   </div>
   <script>
        var header = document.querySelector('.header')
        var box = document.querySelector('.box')
        // 得到当前鼠标在盒子内的坐标
        /**
         * 水平方向 = pageX - offsetLeft
         * 垂直方向 = pageY - offsetTop
        */
        let x = null
        let y = null
        function moveFn(e){
            box.style.left = e.pageX - x + 'px'
            box.style.top = e.pageY - y +'px'
        }
        header.addEventListener('mousedown', function(event) {
            // 当鼠标点下的时候
            x = event.pageX - box.offsetLeft
            y = event.pageY - box.offsetTop
            document.addEventListener('mousemove',moveFn)
        })
        header.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',moveFn)
        })
   </script>
</body>
</html>
weixin_49696014
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css简易的进度条
qq_45723045的博客
10-22 813
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
CSS nth-of-type和nth-child的区别是什么？
keke795的博客
01-30 693
区别：两种匹配的元素不同，“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素，元素类型是有限制的；而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素，元素类型是没有限制的。 （推荐教程：CSS视频教程） 1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型，n 可以是数字、关键词或公式。 2、:nth-of-type(n) :nth-of-type(n)选择器匹配属于父元素的特定类型的第N
全网最详细的nth-child和:nth-of-type的区别(特别是nth-of-type)
JokerSoulClub的博客
02-24 6266
:nth-child和:nth-of-type都是找对应元素父元素内子元素(仅包含当前父元素子元素不包含子元素的子元素),然后区别在于:nth-child是找出包含对应元素父元素内所有的子元素然后再去找到对应位置的元素后再去匹配选择器,nth-of-type是找出包含对应元素父元素内的子元素,然后根据样式选择器找到的元素的tag,把父元素内子元素所有对应tag种类分别取出排列后,分别比对对应的位置然后匹配选择器 结合以下样例 <!DOCTYPE html> <html> <he
CSS3中nth-of-type与nth-child区别分析详解，nth-of-type和nth-child对比区别，CSS3强大选择器nth-of-type，nth-child
MFWSCQ的博客
07-01 4525
CSS3出来那么久了，很多新特性都已经得到了主流浏览器的很好支持，相信很多人都在项目中使用过nth-of-type(n)以及nth-child(n)这两个选择器，这两个选择器功能很像，甚至在很多情况下使用的作用是相同的，但又有差异，容易给人造成困扰，我之前也是困扰了一段时间，查了忘，忘了查，浪费了很多时间。这里做一个测试以及梳理，以便查询参考记忆。 elt:nth-child(n)：所干的事情分...
nth-of-type和nth-child的区别与相关使用
djh052900的博客
07-04 3199
nth-of-type和nth-child的区别与相关使用，选取前几个，选取后几个，选取前几个和后几个， 选取第几个到第几个等等
写一个斜边框的盒子
BigDippers的博客
02-28 1869
需要使用到的语句： transform:skewX() transfrom:skewY() 首先创建结构： <div class="box1"> <div class="box2"> <span>box2</span> </div> </div> 然后创建css样式: .box1{ width:50px; height:20px; margin:auto; border:1px solid
vue实现div可拖动位置也可改变盒子大小的原理
10-14
在Vue中实现一个div元素既可以拖动改变位置，又可以调整大小的功能，涉及到的核心技术包括事件监听、CSS定位以及DOM操作。下面将详细介绍实现这一功能的步骤和原理。 首先，我们需要监听鼠标事件来处理拖动和改变...
鼠标拖拽拖动盒子时，与盒子内某些点击事件冲突问题解决
09-15
鼠标拖拽拖动盒子时，与盒子内某些点击事件冲突问题解决
JavaScript实现拖拽盒子效果
11-21
包括一个不可点击的超链接，一个可拖拽的盒子，以及一个包含“关闭”和“可拖拽”文本的蓝色盒子。超链接的`href`属性设置为`javascript:void(0);`以防止页面跳转。 ```html (0);" id="register">点击注册 ...
js实现盒子拖拽动画效果
10-14
在本文中，我们将探讨如何使用JavaScript实现一个基本的盒子拖拽动画效果。这个效果允许用户通过鼠标拖动一个带有标题的矩形框（"wrap" 类）在页面上移动。我们将分析提供的代码片段，并解释其中的关键部分。 首先...
html怎么把视频设置为背景,如何将视频设置为网页背景
热门推荐
weixin_42524226的博客
06-11 1万+
第一步：准备工作工欲善其事必先利其器，我们首先需要准备一个视频第二步：html中引入视频这里我们需要用到了video/标签，然后在source里面写视频的路径，autoplay用来使其自动播放，muted用来使其静音，loop为循环播放，依照个人意愿愿意加就加，不加拉倒哈第三步：css设置，调节视频，使其适应屏幕以上的步骤还不能满足我们的需求，这个时候我们会发现有滚动条，而且视频会遮挡我们要显示的...
一、CSS定位布局[相对定位、绝对定位、固定定位]
黑日里不灭的light
09-29 1270
的特征，只不过参照系是body，不会是其它（在设置left等等就会使用absolute的特征）；特性：脱离文档流(意味着可以与普通文档元素重合)，行内块特性（与浮动元素一样，无论原本元素是怎样都是默认有。解释：通过 z-index 控制元素的上下层级，距离参照系左边距离20px；距离参照系右边距离20px；距离参照系顶部距离20px；距离参照系底部距离20px）距离参照系左边距离20px；距离参照系右边距离20px；距离参照系顶部距离20px；距离参照系底部距离20px）距离20px)，这种移动是。
CSS3中：nth-child和：nth-of-type的区别深入理解
lonecry的博客
02-21 9864
1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型，n 可以是数字、关键词或公式。 2、:nth-of-type(n) :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。 ...
CSS布局-定位，相对，绝对，子绝父相，固定定位，层级关系。
weixin_48370579的博客
12-11 2022
CSS布局-定位，相对，绝对，子绝父相。 目录CSS布局-定位，相对，绝对，子绝父相。1、定位1.1 网页常见布局方式1.2 定位的常见应用场景2.1 定位初体验2.2 使用定位的步骤3.1 静态定位4.1 相对定位5.1 绝对定位5.2 绝对定位到底相对于谁进行偏重点6.1 子绝父相介绍7.1 固定定位8.1 元素层级问题8.2 更改定位元素的层级重点学习目标 ◆ 能够说出 定位 的常见应用场...
CSS相对性布局
huang_1228的博客
04-30 78
【代码】CSS相对性布局。
CSS 定位布局 - 相对、绝对、固定、粘滞四种定位
method_Wcs的博客
08-16 2422
文档流 默认文档流，指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式，其中每一个块元素都独占一行，行内元素则在一行之内从左到右排列，直到在当前行遇到了边界后，换到下一行的起点起点继续排列。 脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来，其他盒子在定位的时候，会当做没看到它，两者位置重叠都是可以的，但是依然在DOM树中存在。 定位的实现 我们可以通过设置css中position属性的值来设定元素的定位类型。position的值分为以下几种： stati
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-18 5656
设置元素的【position】属性值等于【absolute】绝对定位之后，如果没有设置【top，left、right、bottom】属性，那么就会默认都是0，这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。relation相对定位，这个属性是相对于元素自身位置定位的，也就是说，某个元素使用相对定位之后，它是以没有使用相对定位之前显示的位置为参考点，上下左右移动多少距离，下面看个案例。CSS也支持相对于某个元素，进行绝对定位，也就是说，可以自定义当前元素是以哪个元素为参考点，从而完成绝对定位。...
CSS布局之定位 详解（相对定位、绝对定位、子绝父相、固定定位）
Esther_liew的博客
05-26 1905
CSS布局--定位详解（相对定位、绝对定位、子绝父相、固定定位）
CSS实现文字向左向右滚动
最新发布
m0_56023096的博客
12-15 565
【代码】CSS实现文字向左向右滚动。
用vue2写一个可拖动可放大缩小的盒子
03-31
以下是一个简单的用Vue 2实现可拖动可放大缩小的盒子的示例： ``` <template> <div class="box" ref="box" :style="{ top: boxTop + 'px', left: boxLeft + 'px', width: boxWidth + 'px', height: boxHeight + 'px' }" @mousedown="startDrag" @mousemove="dragBox" @mouseup="stopDrag" @mousewheel="zoomBox"> </div> </template> <script> export default { data() { return { boxTop: 0, boxLeft: 0, boxWidth: 200, boxHeight: 200, isDragging: false, mouseStartX: 0, mouseStartY: 0, originalBoxTop: 0, originalBoxLeft: 0, originalMouseX: 0, originalMouseY: 0, }; }, methods: { startDrag(event) { this.isDragging = true; this.mouseStartX = event.clientX; this.mouseStartY = event.clientY; this.originalBoxTop = this.boxTop; this.originalBoxLeft = this.boxLeft; this.originalMouseX = event.clientX; this.originalMouseY = event.clientY; }, dragBox(event) { if (this.isDragging) { const deltaX = event.clientX - this.mouseStartX; const deltaY = event.clientY - this.mouseStartY; this.boxTop = this.originalBoxTop + deltaY; this.boxLeft = this.originalBoxLeft + deltaX; } }, stopDrag() { this.isDragging = false; }, zoomBox(event) { event.preventDefault(); const zoomFactor = event.deltaY > 0 ? 0.9 : 1.1; this.boxWidth *= zoomFactor; this.boxHeight *= zoomFactor; this.boxTop -= (this.boxHeight * (zoomFactor - 1)) / 2; this.boxLeft -= (this.boxWidth * (zoomFactor - 1)) / 2; }, }, }; </script> <style scoped> .box { position: absolute; background-color: #ccc; border: 1px solid #000; cursor: move; } </style> ``` 这个组件包含一个`<div>`元素，它的位置和大小可以通过计算属性`boxTop`，`boxLeft`，`boxWidth`和`boxHeight`来控制。`<div>`元素绑定了`mousedown`、`mousemove`、`mouseup`和`mousewheel`事件，用来实现拖动和缩放功能。 当用户按下鼠标左键时，`startDrag`方法被调用，记录鼠标的起始位置和盒子的原始位置。当用户移动鼠标时，`dragBox`方法被调用，计算鼠标移动的距离，并更新盒子的位置。当鼠标左键松开时，`stopDrag`方法被调用，设置`isDragging`为`false`，停止拖动。 当用户滚动鼠标滚轮时，`mousewheel`事件被触发，调用`zoomBox`方法实现缩放功能。根据滚轮滑动的方向，计算缩放因子，并更新盒子的大小和位置。 在样式中，盒子使用`position: absolute`定位，设置了背景颜色和边框，并指定了移动鼠标时的光标样式为`cursor: move`。scoped属性用于将CSS样式限制在当前组件内。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值