拖动小物块

矫情吗；* 2022-08-21 11:58 133阅读 0赞

<meta name="description" content="网页描述" />  
<link rel="stylesheet" type="text/css" href="" />  
<style type="text/css">  
div\{height:300px;width:300px;position:absolute;top:10px;left:20px;background:red;\}  
</style>  
<script type="text/javascript" src="JS/jquery.min.js"></script>  
<script type="text/javascript">  
//先加载页面  
$(function()\{  
//先获得对象  
var imgObj=document.getElementById("imges");  
//当鼠标按下时  
imgObj.onmousedown =function(event)\{  
var imgX=event.clientX-imgObj.offsetLeft;  
var imgY=event.clientY-imgObj.offsetTop;  
//当鼠标按下并移动是时候  
//注意这是移动是对文档  
    document.onmouseover =function(event)\{  
var overX=event.clientX-imgX;  
var overY=event.clientY-imgY;  
imgObj.style.left=overX+"px";  
imgObj.style.top=overY+"px";  
\}  
//当鼠标离开时就调用函数把鼠标覆盖置为空；  
document.οnmοuseup= function()\{  
document.οnmοuseοver=null;  
\}   
\}  
  
\})  
</script>  
</head>  
<body>  
<div id="imges"></div>  
</body>

</html>

**效果图：**

**![Center][]**

**![Center 1][]**

**![Center 2][]**

[Center]: /images/20220724/199e05c249a94e3e9548672a474a6de2.png
[Center 1]: /images/20220724/b8c523b97c3a4318a2238ccac06fd39f.png
[Center 2]: /images/20220724/e0cc48164693472cab5779e46e087d47.png

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 Openlayers实战：小物块运动轨迹动画

Openlayers地图在做轨迹的时候，除了标注各个位置点，连线，还经常会用到轨迹动画。本实战就是这样示例，一个物块在轨迹上移动。其实质是用setInterval，每个一小段

快来打我*/ 2024年03月17日 17:01/ 0 赞/ 111 阅读

相关一个简单的滑块拖动验证码实例

![e60f92b5f7fb37be4d8ce3aa7c3f493e.png][] 使用这种验证方法的目的：证明当前的用户不是机器人~防止恶意操作。实现思路：

矫情吗；*/ 2022年10月05日 02:54/ 0 赞/ 272 阅读

相关拖动小物块

<meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href

矫情吗；*/ 2022年08月21日 11:58/ 0 赞/ 134 阅读

相关小程序拖动排序

做了一个小程序的 movable-area 组件做的一个拖动功能，可能是我比较笨，逻辑我想了一个星期才有点起色，终于是弄好了，废话少说，上代码。 <view c

一时失言乱红尘/ 2022年05月13日 13:26/ 0 赞/ 378 阅读

相关 JavaScript实现拖动滑块验证（方法已封装）

前提之前写了一篇博文，题目是[《JavaScript实现拖动滑块验证》][JavaScript]，里面都是用最简单的方式实现的。后来，群里大神推荐了一款`unlo

叁歲伎倆/ 2022年05月11日 20:16/ 0 赞/ 386 阅读

相关 jQuery拖动滑块验证样式

样式： ![在这里插入图片描述][20190410165219156.gif] 目录结构： ![在这里插入图片描述][20190410165317919.png] H

绝地灬酷狼/ 2022年02月21日 08:10/ 0 赞/ 476 阅读

相关 uni-app 拖动滑块验证（插件分享）

插件地址：[https://ext.dcloud.net.cn/plugin?id=573][https_ext.dcloud.net.cn_plugin_id_573]

我会带着你远行/ 2021年12月10日 08:41/ 0 赞/ 1944 阅读

相关小程序拖动滑块验证（自定义组件插件分享）

效果图： ![20190714221136963.gif][] 文章目录： \1 创建组件 \2 组件编码 MoveVerify.wxss MoveVerify.w

柔光的暖阳◎/ 2021年12月09日 23:34/ 0 赞/ 745 阅读

相关 JS之鼠标事件拖动一个块移动

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

系统管理员/ 2021年09月15日 23:06/ 0 赞/ 371 阅读

相关 wx小程序——可拖动 View

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

曾经终败给现在/ 2021年07月25日 13:22/ 0 赞/ 433 阅读