HTML5拖动元素放到指定位置

最新推荐文章于 2023-03-14 12:30:01 发布
最新推荐文章于 2023-03-14 12:30:01 发布
阅读量8.4k 收藏 9
点赞数 3
分类专栏： JavaScript 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ag_wenbi/article/details/70677307
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#box {width: 300px;height: 200px;border: 1px solid #000;}
		#img {width: 150px;height: 100px;}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			function start(ev) {
				ev.dataTransfer.setData("Text", ev.target.id); //设置数据类型为（“Text”）和ID 
			}
			function stop(ev) {
				ev.preventDefault(); //阻止元素发生默认行为 
				var id = ev.dataTransfer.getData("Text"); //获取数据类型对应的ID         
				ev.target.appendChild(document.getElementById(id));
			}
			function over(ev) {
				ev.preventDefault();
			}
			var oBox = document.getElementById('box');
			var oImg = document.getElementById('img');
			oImg.ondragstart = function (ev) { //要拖动的元素触发本函数 
				start(ev); 
			}; 
			oBox.ondragover=function(ev){//拖动过程中触发本函数 
				over(ev); 
			}; 
			oBox.ondrop=function(ev){//拖动结束时触发本函数 
				stop(ev); 
			}; 
		};
	</script>
</head>
<body>
	<div id="box"></div>
	<img src="../img/zly6.jpg" draggable="true" id="img" /> </body>
</html>

 

Agwenbi
关注
专栏目录
h5页面拖拽选择数字到指定位置_html随意拖动内容位置的两种实现方式
weixin_39569753的博客
12-19 1017
测试：chrome v80.0.3987.122 正常两种方式为：拖拽普通标签位置或拖拽canvas中的文本框位置1. 实现鼠标拖动标签元素到任意位置css 代码#range {position: relative;width: 600px;height: 400px;margin: 10px;background-color: rgb(133, 246, 250);}.icon {positio...
h5页面拖拽选择数字到指定位置_H5 拖拽,一个函数搞定,直接指定对象设置可拖拽...
weixin_31188807的博客
12-29 541
页面上，弹个小窗体，想让它可以拖拽，又不想 加载一堆js，就简单的能让他可以拖动？ 嗯，下面有这样一个函数,调用下就好了！1. 先来说说 H5的 拖拽在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：拖动开始 - ondragstart 和 setData()当元素被拖动时，要发生什么。如，ondra...
javascript拖拽图片到指定位置
08-14
javascript拖拽图片到指定位置 。。。。。。。。。。。。。。。。。。。
HTML5 拖放元素
Hillbox
08-14 169
对书中案例的理解和注释。使用draggable属性和方法来实现元素拖放。
HTML 鼠标坐标和元素坐标
weixin_34092455的博客
03-31 410
在这一篇文章中，将会介绍鼠标坐标、元素坐标以及鼠标在指定元素内的坐标。   1. 鼠标坐标 在触发鼠标相关事件时(如：click、mousemove)，可以通过事件对象获取当前鼠标的坐标。 获取的坐标可分为2种： 1) MouseEvent.screenX、MouseEvent.screenY ：基于屏幕的X、Y坐标；以屏幕的左上角为0,0起始点。   2) MouseEvent...
html5 drop坐标,HTML5 拖放（Drag 和 Drop）
weixin_28883533的博客
05-31 171
HTML5 拖放(Drag 和 Drop)拖放(Drag 和 drop)是 HTML5 标准的组成部分。将 RUNOOB.COM 图标拖动到矩形框中。拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。注意...
JS 原生拖拽至任意位置
qq_42048638的博客
03-14 367
JS 原生 元素拖拽至任意位置。
HTML5元素拖拽drag与拖放drop相关API
02-25
其实HTML5就是新增一些有用的API让我们更轻松的开发从而把更多精力都放在业务逻辑上来这些API的使用也非常简单不过我的记性不太好所以还是以博客的形式记录下来（手动滑稽）今天就来写一下这个拖拽API说起拖放，其实...
拖动元素靠边吸附示例dome
10-13
元素吸附效果是此示例的核心，当用户拖动元素接近页面边缘时，元素会自动贴合到边缘。实现这一效果通常包括以下几个步骤： 1. 计算元素位置：通过JavaScript获取元素的当前位置和页面尺寸。 2. 边缘检测：判断元素...
html拖动图片到指定位置,JS实现简易的图片拖拽排序实例代码
weixin_36432875的博客
06-04 1419
由HTML5的拖放API，实现的简易图片拖放效果。一、HTML5拖放API的知识点首先我们得知道元素怎么才可以被拖放，需要设置它们的draggable属性，其中img和a标签的dragable属性默认是true，不需要我们手动设置。拖放API的监听事件如下:dragstart: 源对象拖拽开始；drag: 源对象拖拽的过程中；dragend: 源对象拖拽结束；dragenter: 进入过程对象区域...
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动
06-20
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动元素到指定的对应位置
利用HTML5的drop、drag及拖动属性做元素位置交换
07-01
使用九宫格作为画布背景；每个九宫格中的元素为数字、数学公式、物理公式(注:一切能在数学条件下代表大小的元素)；拖动九宫格选中元素到目标元素，元素进行两两交换位置；在每一次元素位置发生变化时进行比较当前九宫格中所有元素是否由小到大顺序排列，如顺序排列就进入下一关；
拖拽列表.html
03-21
/** 拖拽功能实现原理和说明： 1、说明：拖拽实现一般有两种方式，一种是使用html的新特性dragable，但是由于在火狐浏览器上dragable每拖拽一次会打开一个新的标签， 尝试阻止默认行为和冒泡都无法解决，所以使用第二种方法来实现拖拽。第二种方法是使用js监听鼠标三个事件，配合节点操作来实现。 2、实现原理： 01-在允许拖拽的节点元素上，使用on来监听mousedown(按下鼠标按钮)事件，鼠标按下后，克隆当前节点 02-监听mousemove(鼠标移动)事件，修改克隆出来的节点的坐标，实现节点跟随鼠标的效果 03-监听mouseup(放开鼠标按钮)事件，将原节点克隆到鼠标放下位置的容器里，删除原节点，拖拽完成。 3、优势： 01-可动态添加允许拖拽的节点(因为使用了on委托事件) 02-可获取到原节点，跟随节点，目标节点的对象，可根据需要进行操作。 03-使用js实现，兼容性好。 **/
html5元素的坐标,深入理解html5中的position
weixin_42106299的博客
06-01 283
CSS的Position很重要，position一共有4个属性值，就是以下几个值：static，relative，absolute，fixed。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，显示层级通过z-index控制。static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，rig...
计算html元素的坐标
地球是圆的？
09-13 774
function getepoint(e){   var x = e.offsetLeft;   var y = e.offsetTop;   while(e = e.offsetParent){     x += e.offsetLeft;     y += e.offsetTop;   }   return {"x": x, "y": y};} 
HTML拖拽
m0_74331185的博客
12-06 1976
HTML拖拽
html-拖拽
weixin_30312659的博客
09-28 77
html-拖拽(draggable="true")拖拽的7个事件：> 拖拽块.ondragstart=function(){console.log("拖拽开始")；}> 拖拽块.ondrag=function(){console.log("拖拽中")；}> 拖拽块.ondragend=function(){console.log("拖拽结束")；}> 投放区.ondrage...
html拖拽
oLeKeLe的博客
10-09 236
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个HTML文档</title> <style type="text/css"> </style> <!--对所有路径都在一根文件夹下 base对所有的...
HTML5 drag & drop 拖拽与拖放简介
weixin_34032792的博客
01-27 136
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=1419 一、前面的话 HTML5提供专门的拖拽与拖放的API，以后实现这类效果就不必乱折腾了。但是，考虑到Opera浏览器似乎对此不感冒，在通用性上有待商榷，所以这里也就简单说一说。 二、相关重点 DataT...
html拖动图片到指定位置,HTML5和JS将多个图像拖放到特定位置
最新发布
05-16
HTML5和JS提供了方便的API来实现拖放功能，可以轻松地将多个图像拖放到特定位置。 首先，需要为每个图像设置一个可拖动属性，可以使用HTML的draggable属性来实现： ```html <img src="image1.png" draggable="true"/> <img src="image2.png" draggable="true"/> <img src="image3.png" draggable="true"/> ``` 接下来，需要为拖动目标设置事件处理程序，以便在拖动时触发相应的操作。可以使用HTML的ondragstart事件来设置拖动开始时的操作： ```html <img src="image1.png" draggable="true" ondragstart="drag(event)"/> <img src="image2.png" draggable="true" ondragstart="drag(event)"/> <img src="image3.png" draggable="true" ondragstart="drag(event)"/> ``` 其中，drag(event)是一个自定义的JavaScript函数，用于处理拖动事件。 在drag(event)函数中，需要设置拖动数据，可以使用event.dataTransfer.setData()方法来设置拖动数据的类型和值。例如，可以将图像的URL作为文本数据传递： ```javascript function drag(event) { event.dataTransfer.setData("text", event.target.src); } ``` 接下来，需要为拖放目标设置事件处理程序，以便在拖放时触发相应的操作。可以使用HTML的ondragover事件来设置拖放目标的操作： ```html <div ondragover="allowDrop(event)" ondrop="drop(event)"></div> ``` 其中，allowDrop(event)和drop(event)是两个自定义的JavaScript函数，用于处理拖放事件。 在allowDrop(event)函数中，需要阻止默认的拖放行为，可以使用event.preventDefault()方法： ```javascript function allowDrop(event) { event.preventDefault(); } ``` 在drop(event)函数中，需要获取拖放数据，并将图像放置到特定位置。可以使用event.dataTransfer.getData()方法来获取拖放数据的类型和值。例如，可以将图像的URL作为文本数据传递，然后创建一个新的img元素，并将其src属性设置为拖放数据的值： ```javascript function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); var img = document.createElement("img"); img.src = data; event.target.appendChild(img); } ``` 这样，就可以实现将多个图像拖放到特定位置的功能了。完整的示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Drag and Drop</title> <style> div { border: 1px solid black; height: 300px; width: 300px; } </style> <script> function drag(event) { event.dataTransfer.setData("text", event.target.src); } function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); var img = document.createElement("img"); img.src = data; event.target.appendChild(img); } </script> </head> <body> <img src="image1.png" draggable="true" ondragstart="drag(event)"/> <img src="image2.png" draggable="true" ondragstart="drag(event)"/> <img src="image3.png" draggable="true" ondragstart="drag(event)"/> <div ondragover="allowDrop(event)" ondrop="drop(event)"></div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Agwenbi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值