HTML－－如何实现通过鼠标事件拖动页面图像(代码)

最新推荐文章于 2024-08-22 23:00:01 发布
原创 最新推荐文章于 2024-08-22 23:00:01 发布 · 3.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #function #variables #reference #xhtml #object

本文档提供了一个使用HTML、CSS和JavaScript实现的简单示例，展示了如何通过鼠标操作在网页上拖动并重新定位图片元素。代码中包含了设置全局变量、事件监听器以及对象定位等关键步骤。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>onMouseMove Event Handler</title>
<style type="text/css">
    #camap {position:absolute; left:20; top:120}
    #ormap {position:absolute; left:80; top:120}
    #wamap {position:absolute; left:140; top:120}
</style>
</head>

<script  type="text/javascript">
// global variables used while dragging
var offsetX = 0
var offsetY = 0
var selectedObj
var frontObj
// set document-level event handlers
document.onmousedown = engage
document.onmouseup = release
// positioning an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
    obj.style.pixelLeft = x
    obj.style.pixelTop = y
}
// setting the z-order of an object
function bringToFront(obj) {
    if (frontObj) {
        frontObj.style.zIndex = 0
    }
    frontObj = obj
    frontObj.style.zIndex = 1
}
// set global var to a reference to dragged element
function setSelectedObj() {
    var imgObj = window.event.srcElement
    if (imgObj.id.indexOf("map") == 2) {
        selectedObj = imgObj
        bringToFront(selectedObj)
        return
    }
    selectedObj = null
    return
}
// do the dragging (called repeatedly by onMouseMove)
function dragIt() {
    if (selectedObj) {
        shiftTo(selectedObj, (event.clientX - offsetX), (event.clientY - offsetY))
        return false
    }
}
// set global vars and turn on mousemove trapping (called by onMouseDown)
function engage() {
    setSelectedObj()
    if (selectedObj) {
        document.onmousemove = dragIt
        offsetX = window.event.offsetX - document.body.scrollLeft
        offsetY = window.event.offsetY - document.body.scrollTop
    }
}
// restore everything as before (called by onMouseUp)
function release() {
    if (selectedObj) {
        document.onmousemove = null
        selectedObj = null
    }
}
</script>

<body>
<h1>onMouseMove Event Handler</h1>
<img id="camap" src="d:/bw/n001387.jpg" style="left: 31px; top: 1px"  />
<br />
<img id="ormap" src="d:/bw/n001387.jpg" style="left: 31px; top: 297px" />
<br />
<img id="wamap" src="d:/bw/n001387.jpg" style="left: 31px; top: 184px" />
<br />
</body>
</html> 

vue2 - 实现网页悬浮窗鼠标可拖拽和靠边隐藏功能，可拖拽悬浮球组件示例代码，当靠近屏幕边缘时会磁吸靠近并缩进半隐藏，反之鼠标移入时悬浮球按钮元素会恢复原状态，vue如何实现右侧悬浮并且能拖拽拖动？
高级前端工程师
04-08 5693
vue2，pc端网页，h5移动端，vue实现悬浮窗拖拽和靠边隐藏，vue2实现一个可以随意拖拽的悬浮按钮组件拖动悬浮按钮，实现h5拖拽悬浮挂件附带吸边效果，拖拽磁吸边缘半隐藏，PC端侧边悬浮并且靠边隐藏一半，在页面右上角实现可悬浮/隐藏的系统菜单，vue2飘浮窗实现（屏幕上下左右移动，触壁回弹）v拖拽悬浮组件靠边收起，可拖拽到页面的任何位置，怎么实现右侧悬浮，并且能拖拽的功能，实现可以拖动的悬浮框，拖拽球体贴边隐藏，vue2实现悬浮可拖动且靠近屏幕边缘自动吸附悬挂图标组件，拖动时很卡不流畅解决，Vue2实现
vue3 - 实现网页悬浮窗鼠标可拖拽和靠边隐藏功能，可拖拽悬浮球组件示例代码，当靠近屏幕边缘时会磁吸靠近并缩进半隐藏，反之鼠标移入时悬浮球按钮元素会恢复原状态，vue3怎么实现右侧悬浮并且能拖拽拖动
最新发布
高级前端工程师
04-08 7285
vue3，pc端网页，h5移动端，vue3实现悬浮窗拖拽和靠边隐藏，vue3实现一个可以随意拖拽的悬浮按钮组件拖动悬浮按钮，实现h5拖拽悬浮挂件附带吸边效果，拖拽磁吸边缘半隐藏，PC端侧边悬浮并且靠边隐藏一半，在页面右上角实现可悬浮/隐藏的系统菜单，vue3飘浮窗实现（屏幕上下左右移动，触壁回弹）v拖拽悬浮组件靠边收起，可拖拽到页面的任何位置，怎么实现右侧悬浮，并且能拖拽的功能，实现可以拖动的悬浮框，拖拽球体贴边隐藏，vue3实现悬浮可拖动且靠近屏幕边缘自动吸附悬挂图标组件，拖动时很卡不流畅解决，Vue3实
js实现鼠标拖动div.html
02-14
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现拖动的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
html5使鼠标移动上去页面上的图片向左移动
Fanzongshen的博客
03-06 1438
在这里插入代码片<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 665px; margin: 0 auto; position: relative; border: 1px solid #CCCCCC; border-bottom: 1
Javascript实现图片位置控制（鼠标拖拽 + 键盘方向键移动）源码分享
weixin_34198881的博客
09-11 348
实现图片的拖拽和鼠标方向控制位移   HTML文件代码如下(img.html)：   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3....
html鼠标拖动按钮,javascript – 使用鼠标拖动在HTML画布内移动图像
weixin_39531780的博客
06-04 229
原创 – 移动外部图像码：$(window).mousemove(function(event) {$("#stcanvas").css({"left" : event.pageX, "top" : event.pageY});});CSS：#stcanvas{position:absolute;}你显然会添加一个按钮来启动移动.或者,您可能希望使用jquery UI进行内置拖放操作.更新 – 移...
HTML5 元素拖动 - 实现元素左右拖动
Lucky Star的博客
02-22 4385
1、拖放(Drag 和 drop)是 HTML5 标准的组成部分。 　　拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 　　浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放(注：在 Safari 5.1.2 中不支持拖放)。
鼠标拖动图像功能的完整实现代码
以下是对实现鼠标拖动图像功能的源代码资源的相关知识点的详细说明。 ### 知识点一：HTML 在HTML中，要实现鼠标拖动图像，首先需要在页面上放置一个图像元素。这通常通过`<img>`标签来实现，它需要一个`src`属性来...
vue2 - 详细实现鼠标按住后拖动图片到指定位置并自动贴合吸附盒子容器，左边和右边分别设置好容器将图像拖拽到任意位置，左右来回拖动放置图片，vue实现让图片可以拖拽交换位置，图片在两个盒子里互换位置
高级前端工程师
08-22 4212
vue2，nuxt2，图片来回拖曳，图片左右交替，替换，图像，vue2来回拖拽放置图片，图片拖拽交换位置，vue实现拖拽元素互换位置，拖动容器互换位置，vue实现拖拽图片切换图片位置，拖拽组件，拖曳插件，如何让图片在两个dom盒子里互换位置，鼠标按住拖动图片，vue图像图片拖曳，图片拖拽，让一张图片可以拖动，图标icon，img图像，一张图片从左边拖到右边，在一个容器范围内自由拖拽图片，基于vue2实现图片拖拽功能_vue实现图片拖拽，详细示例代码教程，vue拖拽互换位置，拖拽交换两个节点的位置，vue2实
HTML5基于SVG实现可拖拽和缩放的世界地图效果源码.zip
11-04
3. 可拖拽功能实现：HTML5提供了`dragstart`、`drag`、`dragend`等一系列拖放事件，结合JavaScript可以实现元素的拖拽功能。在这个世界地图示例中，可能通过监听这些事件来改变地图的位置。 4. 缩放功能实现：地图...
javascript实现用鼠标拖动页面的效果
08-31
javascript实现用鼠标拖动页面的效果，而不是传统意义上的拖动一个层的效果
html5鼠标拖拽填充游戏代码
07-24
html5鼠标拖拽填充游戏代码，点击按住图标，拖动到对应的名称格子里面，完成全部及通关小游戏代码。
鼠标事件列表--html中所有事件的列表
09-06
html中所有事件的列表,给自己备份下。如果大家看上也可以用用
基于html5 的拖拽连线
04-08
NULL 博文链接：https://zha-zi.iteye.com/blog/1586814
HTML5 Canvas实现连线题特效特效代码
03-20
HTML 5 Canvas实现连线题特效是一款连线题小游戏特效，可任意修改。
html如何实现图片左右滑动效果,HTML+CSS入门 如何实现图片(image) 左右滑动
热门推荐
weixin_35772595的博客
06-03 1万+
本篇教程介绍了HTML+CSS入门 如何实现图片(image) 左右滑动，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<1、需求需要用简单动画的形式将一组图片进行展示，图片数量不固定2、效果如下:3、思路说到动画，首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧，然后根据图片数量计算每个图片的左边距，这样就可以依次排列了。然后就...
使用js实现鼠标可拖动图片更改位置，点击图片弹出对话框
sinat_20078327的博客
01-24 867
之前为完成网页边侧放置一个可点击的图标，但图标有时会影响用户浏览网页，所以需要可以拖拽图片更改其位置。但是在实现过程中总是会在拖拽结束松开鼠标时总是会弹出对话框，最终经过多次更改终于完成了这个功能！这是我随意写的一个样式，主要是设置绝对定位！
html怎么做到滚动鼠标转换,JavaScript实现鼠标滚轮控制页面图片切换
weixin_30984749的博客
05-31 693
最常见就是图片的切换了，能通过滚动滚轮进行图片的浏览，省得用户还要去点下一张，做这种繁琐的步骤。来看个简单的例子吧。-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">鼠标通过滚动滚轮切换图片#picBox{width:800px;height:600px;...
html5 onmousedown,JavaScript onmousedown 事件：鼠标任何一个按键被按下
weixin_35252187的博客
06-20 606
JavaScript onmousedown 事件当鼠标按键(任何一个键)被按下时，会触发 onmousedown 事件，如下例子所示：在这个例子中，将鼠标放在图片上，当按下任何一个键时，就会弹出提示窗口：您点击了这幅图片！。您可以点击下面的图片试试：onmousedown 事件与 onClick 事件的区别onmousedown 事件与 onClick 事件在我们看来非常相似，其实 onClic...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值