js拖拽

最新推荐文章于 2023-11-28 11:58:47 发布
最新推荐文章于 2023-11-28 11:58:47 发布
阅读量161 收藏
点赞数
分类专栏： javaScript 文章标签： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37970097/article/details/102641195
版权

拖拽使用的三个事件

onmousedown    //鼠标按下
onmousemove    //鼠标移动
onmouseup      //鼠标抬起

<head>
   <style>
        img{
            position:absolute;
            left:0;
            top:0;
            width:200px;
        }
    </style>
</head>
<body>
<img src="images/1.jpg" alt="">
<script>
    var oImg = document.getElementsByTagName('img')[0];
	oImg.onmousedown=function(e){
		e=e||window.event;
		var starX=e.clientX;//记录鼠标按下时的水平位置
		var starY=e.clientY;//记录鼠标按下时的竖直位置
		var starLeft=this.offsetLeft;//记录鼠标按下时图片的初始水平位置
		var starTop=this.offsetTop;//记录鼠标按下时图片的初始竖直位置
		document.onmousemove=function(e){
			e=e||window.event;
			var moveX=e.clientX;//记录鼠标移动时的水平位置
			var moveY=e.clientY;//记录鼠标移动时的竖直位置
			oImg.style.left=starLeft+e.clientX-starX+"px";//设置图片的left值
			oImg.style.top=starTop+e.clientY-starY+"px";//设置图片的top值
		}
		oImg.onmouseup=function(){
			document.onmousemove=null;//
		}
	}
</script>
</body>
lj深
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 实现拖拽
csdn_chenli
09-29 576
JavaScript基础入门学习，实现移动拖拽。适合新手学习和参考。不足之处希望大神提出你宝贵的意见。 一：实现简单的拖拽 二：实现浏览器的兼容性。在拖拽的过程中不会超出屏幕，当你拖拽物体放在那里，就是那里。如果放在右下角，缩小屏幕是，物体不会被遮罩。 实现效果： 一、简单的实现拖拽 一 界面设计     二 设计效果        由于我们弹窗的遮罩我们采用了c
js中的拖拽drag
ruler1112的博客
08-26 5364
/** * 拖放事件 * (默认图像,链接,文本是可以拖动的) * (别的元素要拖动首先设置draggable="true":对于draggable的支持ie10+,ie9-只能使用默认拖动) * 1. 被拖放元素拖放事件: * a.dragstart:被拖放的元素开始拖放的时候触发 * b.drag:在拖放过程中持续触犯 * c.dragend:停止
JS实现拖拽功能
weixin_46831501的博客
03-04 1万+
记录一下新学习到的拖拽功能。 H5新增了一个draggable属性，用于对需要拖拽的元素进行标记，定义了这个属性后就可以定义拖拽事件了。拖拽事件如下图： 接着就是上代码： HTML以及CSS部分：比较简单就不多说了 <div class="wrapper"> <section class="show"> <h1>拖动你喜欢的图片</h1> <div class="tshirt"> <img s
如何使用js实现拖拽效果？
黄彪博客
11-28 2485
因为设置了拖拽属性的元素就可以被拖拽，结束拖拽的时候获取一下鼠标与页面的距离，减去鼠标与元素中的距离就行了，逻辑为旧有拖拽方式的第二种：盒子的位置 = 元素与页面间的距离 - 元素与盒子的距离。：返回元素与有定位的父类的上左边距，如果父类都没有定位，那么返回相对于页面的上左边距（本示例中页面内只有一个元素，故获取的值是元素相对于页面的距离）：鼠标距离触发事件的元素的上左边距（本示例中只有一个元素，故获取的值为鼠标相对于盒子元素的上左边距）// 元素的位置 = 鼠标与页面的距离 - 鼠标与元素的距离。
js中的拖拽
betterangela的博客
11-11 3216
拖拽 dom javascript
一文带你了解原生js实现拖拽的具体细节
qq_52569656的博客
12-13 2008
本文通过图文的方式介绍了使用原生js实现元素拖拽的方式，包含了逻辑分析，边界处理等。
使用js实现拖拽功能（附具体实现代码）
笑到根本停不下来的Kathy思的博客
05-24 1万+
js拖拽功能的实现主要依靠3个事件，分别是onousedown鼠标按下、onmousemove鼠标移动和onmouseup鼠标抬起。并且它们具体是按照这样的一个顺序执行的。 `event.clientX`和`event.clientY`分别是鼠标当前的横坐标和纵坐标，`offsetX` 和 `offsetY` 分别表示元素的初始横坐标和纵坐标，移动的过程改变的是绝对定位下的`left`和`top`值。
three.js拖拽生成场景简单示例
09-06
在本文中，我们将深入探讨如何使用three.js库创建一个简单的拖拽生成场景的示例。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得容易。结合OrbitControls.js，我们可以实现对场景中的对象...
js.zip_imagetrans.js_javascript 拖动
09-20
本项目“js.zip_imagetrans.js_javascript 拖动”关注的就是这一领域，它结合了JavaScript库`ImageTrans.js`和`CJL.0.1.min.js`，实现了图片旋转、鼠标滚轮缩放以及可拖动的div元素等超炫功能。下面将详细介绍这些...
javascript拖拽图片到指定位置
08-14
在JavaScript和jQuery的世界里，实现图片拖放至指定位置的功能是一项常见的交互设计，它能够提升用户的体验，使得操作更加直观和便捷。以下我们将详细探讨如何使用这两种技术来完成这一任务。 首先，我们需要理解...
JavaScript 拖拽翻页效果代码
10-29
总结来说，JavaScript拖拽翻页效果结合了事件处理、CSS定位和用户交互设计，为用户提供了一种直观且富有动态感的浏览方式。通过理解和实现这样的功能，开发者可以提升网站或应用的用户体验，使其更具吸引力。
js 拖拽 流程设计器
10-10
**JavaScript拖拽流程设计器** 在Web开发中，创建交互式用户界面是提升用户体验的重要手段，而流程设计器就是其中的一种。JavaScript作为最广泛使用的客户端脚本语言，为实现这样的功能提供了强大的支持。本文将...
Js中六种拖拽(拉)事件（drag 和 drop）
QYgujingjing的专栏
11-02 3637
Js中六种拖拽(拉)事件（drag 和 drop）
HTML5--拖拽API(含超经典例子)
热门推荐
冯小东
11-18 5万+
一、关于拖拽API 拖拽API是HTML5的新特性，相对于其他新特性来说，重要程度占到6成，实际开发中使用比例占到3成，学习要求个人认为是达到掌握即可的程度。 二、什么是拖拽和释放？ 拖拽：Drag 释放：Drop 拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了 三、什么是源对象和目标对象？ 源对象：指的是我们鼠标点击的
js 实现拖拽效果
weixin_44244924的博客
03-31 617
js实现拖拽效果
js实现拖拽
编码世界
09-19 822
mousedown、mousemove、mouseup监听这三个事件。
js事件中的拖拽
szydqq的博客
07-15 882
js事件的拖拽
js实现拖拽功能
study_way的博客
10-17 2223
在这个示例中，创建了两个元素：一个可拖拽的元素（draggable）和一个接受拖动的目标元素（droppable）。ondragover 阻止默认行为，以允许元素可以放置在该区域，而 ondrop 处理实际的拖放操作，将拖拽的元素追加到目标元素中。通常，要实现拖拽效果，需要将元素设置为绝对定位，这样它可以脱离文档流，使其能够在页面上自由移动。事件处理程序中更新元素的位置时，限制元素的移动范围，以防止它移出可见区域或父元素的边界。事件处理程序中，计算鼠标位置的变化，并根据变化来更新被拖拽元素的位置。
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
js拖拽下载文件演示
07-27
对于js拖拽下载文件的演示，你可以使用Bootstrap来实现拖拽文件上传功能。你可以参考这篇博客文章\[1\]，里面详细介绍了如何使用Bootstrap实现拖拽文件上传。另外，你还可以使用webuploader这个前端控件，它兼容性很...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值