拖拽练习

最新推荐文章于 2021-11-11 12:18:15 发布

song2201085242

最新推荐文章于 2021-11-11 12:18:15 发布

阅读量265

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_43666089/article/details/103263526

版权

本文介绍了HTML5中实现拖拽元素的操作步骤，包括在鼠标按下时开始拖拽，鼠标移动时元素跟随移动，以及鼠标松开时元素固定位置。通过设置元素的onmousedown、onmousemove和onmouseup事件，以及利用setCapture和releaseCapture方法来捕获和释放鼠标事件。

摘要由CSDN通过智能技术生成

*1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
*3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//设置btn01对鼠标按下相关的事件进行捕获
//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
/if(box1.setCapture){
box1.setCapture();
}/
obj.setCapture && obj.setCapture();

//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//当鼠标松开时，取消对事件的捕获
obj.releaseCapture && obj.releaseCapture();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
   
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
   
				width: 100px;
				height: 100px;
				background-color: yellow;
				position