首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当图片的绝对位置为css,而父div的位置为相对位置时,如何使图片可拖动?

要使图片在父div中可拖动,可以通过以下步骤实现:

  1. 首先,确保父div的位置属性设置为相对定位(relative),这样才能相对于父div进行定位。
  2. 确保图片的位置属性设置为绝对定位(absolute),这样才能根据父div进行定位。
  3. 为图片元素添加鼠标事件监听器,包括mousedown、mousemove和mouseup事件。
  4. 在mousedown事件中,记录鼠标点击时的初始位置(clientX和clientY)。
  5. 在mousemove事件中,计算鼠标移动的距离(clientX和clientY的变化量),并将图片的位置更新为初始位置加上移动距离。
  6. 在mouseup事件中,取消鼠标事件监听器,停止拖动。

以下是一个示例代码:

HTML:

代码语言:html
复制
<div id="parentDiv" style="position: relative; width: 400px; height: 400px; border: 1px solid black;">
  <img id="dragImg" src="your_image_url" style="position: absolute; top: 0; left: 0; width: 100px; height: 100px;">
</div>

JavaScript:

代码语言:javascript
复制
var dragImg = document.getElementById("dragImg");
var parentDiv = document.getElementById("parentDiv");
var isDragging = false;
var initialX, initialY;

dragImg.addEventListener("mousedown", function(event) {
  isDragging = true;
  initialX = event.clientX - dragImg.offsetLeft;
  initialY = event.clientY - dragImg.offsetTop;
});

document.addEventListener("mousemove", function(event) {
  if (isDragging) {
    var newX = event.clientX - initialX;
    var newY = event.clientY - initialY;
    dragImg.style.left = newX + "px";
    dragImg.style.top = newY + "px";
  }
});

document.addEventListener("mouseup", function() {
  isDragging = false;
});

这样,当鼠标按下并移动时,图片将跟随鼠标移动,实现了图片在父div中的拖动效果。

腾讯云相关产品推荐:无

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

一、固定定位概念语法 ---- 固定定位 是 固定在屏幕中某个位置 , 即使拖动滚动条 , 固定定位元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局中位置 , 漂浮在任何元素上方...固定定位元素 始终显示在浏览器可视窗口固定位置 , 不会改变 ; 注意相对是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 本质是一种 特殊绝对定位 ;...就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 二、固定定位代码示例 ---- 在上一篇博客【CSS】定位...⑥ ( 使用绝对定位在容器任意位置显示子容器 | 代码示例 ) 代码基础上 , 将中心标准流元素设置 固定定位 元素 ; body 设置高度 1000px , 方便进行滚动条滚动 ;...*/ .box { /* 子元素设置绝对定位 元素需要设置相对定位 */ position: relative; /* 内容尺寸 通过测量图片获得 */ width:

1.7K20

CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

CSS 样式 , 设置其定位方式 绝对定位 , 根据 " 子绝相 " 原则 , 该子元素 所在 容器 必须要使用 相对定位 ; 使用 left 和 top 设置 该 子元素 在 容器内 距离左侧位移...盒子 , 使用 绝对定位 定位到 地图图片 北京 位置 ; 调试 界面中 , 找到 city 盒子模型位置 , 双击其 top 和 left 尺寸 , 使用鼠标滚轮修改该 盒子模型 绝对定位位置.../* 使用绝对定位进行定位 , 子绝相 , 容器 相对定位 */ position: absolute; /* 绝对定位位置..., 子元素使用绝对定位 , 该容器需要使用相对定位 */ position: relative; /* 盒子模型宽高 就是 背景图片宽高 */.../* city 类下 div 类型标签 , 类型是以 bowen 开头标签 */ /* 使用绝对定位进行定位 , 子绝相 , 容器 相对定位 */

29420

CSS样式

background-position 设置背景图片显示位置 background-repeat 设置背景图片如何填充 background-size 设置背景图片大小属性 background-repeat...- 盒子内容,显示文本和图像 弹性盒模型 弹性盒子是 CSS3 一种新布局模式 CSS3 弹性盒是一种页面需要适应不同屏幕大小以及设备类型确保元素拥有恰当行为布局方式 引入弹性盒布局模型目的是提供一种更加有效方式来对一个容器中子元素进行排列...height: 150px; background-color: blue; flex: 1; } 文档流 文档流是文档中显示对象在排列所占用位置...相对定位 absolute 绝对定位 fixed 固定定位 其中,绝对定位和固定定位会脱离文档流 设置定位之后:可以使用四个方向值进行调整位置:left、top、right、bottom 相对定位,...绝对定位是相对于离他最近开启了定位祖先元素进行定位(一般情况,开启了子元素绝对定位都会同时开启元素相对定位)如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位 固定定位永远都会相对于浏览器窗口进行定位

24530

2021前端面试高频 HTML + CSS

搜索引擎无法解析 iframe ,不便于SEO优化 浏览器后退功能失效 ❞ 16. img 标签 title 和 alt 有什么区别 ❝title : 当鼠标滑到元素上显示 alt : 图片无法加载显示文字内容...,提供图片访问性, ❞ ---- CSS 1....static或relative,并且floatnone时会触发常规流; 对于静态定位(static positioning),position: static,盒位置是常规流布局里位置; 对于相对定位...定位流 绝对定位方案,盒从常规流中被移除,不影响常规流布局; 它定位相对于它包含块,相关CSS属性:top、bottom、left、right; 如果元素属性positionabsolute...rem rem是CSS3新增一个相对单位,使用rem元素设定字体大小时,仍然是相对大小,但相对只是HTML根元素。

92440

css笔记

position属性取值static,可以将元素定位于静态位置。...相对定位是将元素相对于它在标准流中位置进行定位,position属性取值relative,可以将元素定位于相对位置。...[注意] 如果文档滚动,绝对定位元素会随着它滚动,因为元素最终会相对于正常流某一部分定位。 position属性取值absolute,可以将元素定位模式设置绝对定位。...盒子布局,需要占有位置,因此父亲只能是 相对定位. 这就是子绝由来。...position属性取值fixed,即可将元素定位模式设置固定定位。 对元素设置固定定位后,它将脱离标准文档流控制,始终依据浏览器窗口来定义自己显示位置

7.7K50

CSS基础学习(3)

top: 50px; } 1-3 Position-absolute(绝对定位) 写absolute后,改图片将会脱离信息流,其它照片依次向上移动,占据第一张图片位置 MDN解释: 元素会被移出正常文档流...,并不为元素预留空间,通过指定元素相对于最近非 static 定位祖先元素偏移,来确定元素位置。...绝对定位元素可以设置外边距(margins),且不会与其他边距合并 关键词 : 最近 和 非static定位 和 祖先元素 步骤 首先获取第一张照片元素 发现是absolute布局 找寻节点...已经没有节点,所以按照位置标准进行偏移 1-4 Position-fixed(固定位置) 作用:使一个标题·固定,不随页面的滑动移动 h1 { position...则越在最上面 1-5 sticky(粘性定位) 页面滑动到相应位置,该段文字或图片,会随着页面滑动滑动 h1 { position: sticky; color: yellowgreen

65030

前端知识点总结(html+css)(上)

(如div包含div) 行内元素(常见行内元素a,span.img) 一行显示多个 宽度内容宽度 不可以设置高度和宽度 标签内一般不包含标签(如a标签内包含a标签) 行内块元素 行内块元素包含块级元素和行内元素特征...属性和alt属性区别 alt属性为了给不能看到图片的人提供文字说明,图片加载失败 title属性可以实现鼠标悬停提示内容 css篇 学习css重点就是清楚了解布局,给你一个页面,你能一眼知道这个页面如何布局...高度塌陷 原因 很多情况盒子不方便给高度,子盒子浮动脱离文档流不占位置使盒子高度0 解决方案 在浮动元素末尾加一个空标签,设clear:both 级添加overflow:hidden 使用...visibilty:hidden //隐藏对应元素,在文档中仍保留位置 opacity:0 //隐藏元素,占位置添加事件 9. cssoverflow属性 scroll //必会出现滚动条...初始化css方式 * { padding:0; margin:0; } 12. 如何使英文单词发生词内断行 word-wrap:break-word。

27510

css(2)

边框是正方形,设置半径是边框一半可以得到一个圆形,如果边框是长方形则可以得到一个椭圆。...,元素所占用位置也会被其他元素占用,visibilityhidden只隐藏了元素,元素位置还是存在。...浮动常用三种方式:l left 向左浮动 right 向有浮动 none 默认值,不浮动 1.8.1浮动带来影响 会使浮动框标签塌陷,就是边框是标签,如果子标签设置浮动,则外边框就会塌陷成一条线...注意:position:relative一个主要用法:方便绝对定位元素找到参照物。 1.10.3absolute(绝对定位,重要) 定义:相对于已经定位过得标签再做定位。...z-index 值表示谁压着谁,数值大压盖住数值小, 只有定位了元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,浮动元素不能使用z-index

1.5K20

每天10个前端小知识 【Day 18】

px:绝对单位,页面按精确像素展示 em:相对单位,基准点节点字体大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定值 rem:相对单位,可理解root em...在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,元素具体位置绝对定位坐标决定。...,如果没有则相对于body; 对于 position:fixed,正常来说是相对于浏览器窗口定位,但是元素祖先 transform 属性非 none ,会相对于该祖先进行定位。...在普通流中,元素按照其在 HTML 中先后位置至上下布局,在这个过程中,行内元素水平排列,直到行被占满然后换行。块级元素则会被渲染完整一个新行。...display:none,background-image不会渲染也不会加载,img和picture引入图片不会渲染但会加载 、和background-image引入相同路径相同图片文件名图片只会加载一次

12510

CSS入门?一篇就够了!

position属性取值static,可以将元素定位于静态位置。...相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中位置进行定位,position属性取值relative,可以将元素定位于相对位置。...绝对定位absolute (拼爹型) [注意] 如果文档滚动,绝对定位元素会随着它滚动,因为元素最终会相对于正常流某一部分定位。...position属性取值absolute,可以将元素定位模式设置绝对定位。 注意: 绝对定位最重要一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。...position属性取值fixed,即可将元素定位模式设置固定定位。 对元素设置固定定位后,它将脱离标准文档流控制,始终依据浏览器窗口来定义自己显示位置

5.2K20

css常用布局系统整理——实战开发后复盘小结

:display:inline-bloak;使行内元素具有块级元素特性、使块级元素具有行内元素特性; 1 基础css布局 1.1 position定位 ​ position用于规定如div等元素定位方法类型...left: 10px; /*演示:这句话不起作用,删去*/ } 1.1.2 fixed定位方式 ​ 固定定位,元素位置相对于浏览器(就是你能看到这个浏览器窗口)来说,是固定,无论你怎么滑动窗口...,相对于这个元素原来位置进行移动,原来位置依然是存在(通常里面会包上absolute绝对定位来用)。...浮动元素,脱离文档流(比如正常我们放一个div在页面里,是有一个文档流,就是会有位置变为float定位后,就会漂浮起来,原来位置就不占用了,再放其他div,会从忽略float位置,正常排列...wrap表示自动换行,项目在第一行排列不完,会自动切换到下一行排列。 ​ wrap-reverse 也是自动换行,但不同是,它是从底下开始排列(之前我们都是从上面开始排)。

1.4K40

【愚公系列】2023年03月 其他-Web前端基础面试题(CSS_42道)

设置box-sizing:content-box,将采用标准模式解析计算; 设置box-sizing:border-box,将采用怪异模式解析计算。...按百分比设定一个元素宽度,它是相对容器宽度计算,但是,对于一些表示竖向距离属性,例如 padding-top , padding-bottom , margin-top , margin-bottom...等,按百分比设定它们,依据也是容器宽度,不是高度。...),它所占据空间位置仍然存在,也即是说它仍然具有高度,宽度等属性值。...(1)两个相邻外边距都是正数,折叠结果是它们两者中较大值 (2)两个相邻外边距都是负数,折叠结果是两者中绝对值较大值。

3K20

面试官:CSS 面试题集锦

缺点 图片合成比较麻烦; 背景设置,需要得到每一个背景单元精确位置,; 维护合成图片时,最好只是往下加图片不要更改已有图片。...absolute 绝对定位 绝对定位(position:absolute),相对级而言进行位置偏移,如果没有级或者级没有进行定位,则继续往上一级寻找参照物,直至最终浏览器窗口。...它特殊之处在于它不用像absolute疯狂“找爸爸”,它天生参照于浏览器窗口!对象设置固定定位后,该对象即处于浏览器窗口画面中固定位置,无视文档长短、窗口大小和滚条滚动。...尽量少使用绝对宽度 3.相对大小字体,字体也不能使用绝对大小(px),只能使用相对大小(em)或者高清方案(rem),rem不局限字体大小,前面的width也可以使用,代替百分百。...transform使浏览器元素创建一个 GPU 图层 translate改变位置,元素依然会占据其原始空间 改变绝对定位会触发重新布局,进而触发重绘和复合。 改变绝对定位会使用到 CPU。

3.3K30

CSS-定位(position)

# 相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中位置进行定位,position属性取值relative,可以将元素定位于相对位置。...class="son3">son3 结果 # 绝对定位absolute (拼爹型) position属性取值absolute...子绝相就是指子元素设置绝对定位,元素设置相对定位。 换句话说:如果要对一个子元素使用定位的话,让子元素(绝对定位)以其父元素(相对定位)标准来定位。...因为子级是绝对定位,不会占有位置, 可以放到盒子里面的任何一个地方。 盒子布局,需要占有位置,因此父亲只能是 相对定位. 这就是子绝由来。 <!...position属性取值fixed,即可将元素定位模式设置固定定位。 对元素设置固定定位后,它将脱离标准文档流控制,始终依据浏览器窗口来定义自己显示位置

1.5K10

CSSCSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

CSS】定位 ③ ( 绝对定位 | 容器有定位相对容器定位 | 容器没有定位相对于浏览器进行定位 ) 【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 ) 【CSS...摆放布局 , 没有任何 边偏移 效果 ; 在 使用 定位 , 几乎不适用 静态定位 ; 6、相对定位 相对定位 是 盒子模型 相对于 其在 标准流中位置 设置 ; 如 : 盒子模型 在标准流...级元素 基准 , 设置 边偏移 ; 子元素 添加 绝对定位 , 如果 容器有定位 , 则相对容器坐标进行定位 ; 如果 容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 再次引申...相对定位 ; 容器添加了相对定位 , 子容器也会相对容器 进行定位 ; 7、绝对定位特点 绝对定位 以 带有定位 级元素 基准 , 通过 边偏移 移动位置 ; 如果 绝对定位 元素...如果容器使用了 绝对布局 , 容器就不会保留位置 , 子元素又依赖元素 , 这时元素建议使用相对定位 , 这样能保证页面的稳定性 ; 级元素 需要 占位 , 必须使用 相对定位 ; 子元素

12610

手写原生代码专题 | 图片拖拽效果(一)

) drag(dragstart 事件触发后,只要元素还在被拖动,就会持续触发 drag 事件,类似 mouseover,随着鼠标移动不断触发) dragend(拖动元素动作停止即松开鼠标,...1、编写HTML代码 html代码文件比较简单,我们依次创建5个div方格,并将被拖动图片元素容器初始化放置在第一个方格内,并在元素上添加拖动属性 draggable 值 true,表示此元素可被拖动...接下来我们分别来定义相关事件函数, dragstart :图片目标刚被拖动,我们元素添加灰色粗边框属性 .hold,并将当前此元素容器背景div隐藏,这里使用样式 invisible。...接下来,我们来定义拖动至目标位置元素触发相关事件函数,进入目标元素,触发 dragEnter:阻止默认浏览器行为,其添加进入目标位置元素样式 .hovered;在目标位置元素移动拖动元素...dragOver 函数:阻止浏览器默认行为;元素离开目标位置 dragLeave,我们需要将当前元素样式更改为原始样式 empty;最后定义 dragDrop 函数,用户在目标位置放置拖动图片元素

2.2K30

CSS 常见面试题速查

0, 但依然占据空间,但不可交互 利用绝对定位将元素移除可视区 使用 clip-path 进行裁剪 # em\px\rem 区别 px:绝对单位,页面按精确像素展示 em:相对单位,基准点节点字体大小...,来确定元素位置 如一个绝对定位元素级和祖父级都为 relative,会相对级来产生偏移 fixed 指定元素相对于屏幕视口(viewport)位置来指定元素位置 元素位置在屏幕滚动不会改变...如何产生 根元素(HTML) z-index 值不为 'auto' 绝对/相对 定位 一个 z-index 值不为 'auto' flex item,即元素 display: flex |... # 盒模型 盒模型是什么 对一个文档进行布局,浏览器渲染引擎会根据标准之一 CSS 基础框盒模型,将所有元素表示一个个矩形盒子 CSS 决定这些盒子大小、位置以及属性...改变绝对定位会触发重新布局,进而触发重绘和复合。 transform 使浏览器元素创建一个 GPU 图层,但改变绝对定位会使用到 CPU。

89410
领券