您现在的位置是:群英 > 开发技术 > web开发
如何拖放图片,HTML5中应该怎么做
Admin发表于 2022-06-23 17:08:1224 次浏览
在这篇文章中,我们将学习“如何拖放图片,HTML5中应该怎么做”的相关知识,下文有详细的介绍及示例,小编觉得挺不错的,有需要的朋友可以借鉴参考,希望对大家阅读完这篇能有所获。


拖(drag)放(drop)在页面中是一种常见的HTML5特效,它所表示的就是抓取对象以后再拖放到另一个位置。在 HTML5 中,任何元素都能可以进行拖放,所以接下来在文章中将通过实例详细告诉大家如何实现拖动效果。

拖放效果所需的知识点

draggable

规定元素是否可拖动,一般情况下链接和图片默认是可拖动的。

true:规定元素是可拖动的。

false: 规定元素是不可拖动的。

auto:使用浏览器的默认特性。

拖放元素时触发的事件

ondragstart :拖动元素开始时所触发的事件

ondrag:元素正在拖动时触发的事件

ondragend:用户完成元素拖动后触发的事件

释放目标时触发的事件

ondragenter:被拖动元素进入拖动范围时触发事件

ondragover :表示在什么放置被拖动的数据所触发的事件。

ondragleave:被拖动元素离开拖动范围时触发的事件

ondrop: 鼠标离开拖放元素时

案例分享:将图片放置到box盒子中

(1)设置元素为可拖放的

<img id="drag1" src=images/1.jpg" draggable="true">

(2)元素拖动时发生的情况(拖)

dataTransfer:保存拖动的数据

text为数据类型,event.target.id为数据,将数据赋值给dataTransfer保存。

function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}

(3) 将元素拖动到指定位置(放)

默认情况下无法将元素拖动放到另一个位置,因此需要取消默认事件,需要用到preventDefault()方法

其中 setData()方法指被拖数据的数据类型和值

appendChild() 方法从一个元素向另一个元素中移动元素。

function drop(event)
{
event.preventDefault();//取消浏览器的默认行为
var data=event.dataTransfer.getData("Text");//获取指定格式的数据
event.target.appendChild(document.getElementById(data));
}

完整代码

<body>
	<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<img src="images/1.jpg" id="drag1" draggable="true" ondragstart="drag(event)">
<script>
	function allowDrop(event)
        {
          event.preventDefault();//取消事件默认行为
            }
		//拖
		function drag(event){
		 event.dataTransfer.setData("Text",event.target.id)
		}
		//放
          function drop(event){
	event.preventDefault();
	var data=event.dataTransfer.getData("text");
	event.target.appendChild(document.getElementById(data))
}
</script>
</body>

效果图


以上就是关于如何拖放图片,HTML5中应该怎么做的介绍啦,需要的朋友可以参考上述内容,希望对大家有帮助,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: drag()
相关信息推荐
2021-12-30 20:35:34 
摘要:这篇文章给大家分享的是python中临时文件的相关内容,介绍了临时文件的作用,以及创建临时文件需要注意的问题和正确使用方法,对大家学习和理解Python临时文件会有用的帮助,感兴趣的朋友接下来一起跟随小编看看吧。
2022-05-27 18:02:26 
摘要:spring aop原理:1、AOP 面向切面,是一种编程范式,提供从另一个角度来考虑程序结构以完善面向对象编程OOP;2、AOP为开发者提供了一种描述横切关注点的机制,并能够自动将横切关注点织入到面向对象的软件系统中。
2022-05-26 17:20:09 
摘要:前言对于前端来说,无论是在面试或者工作中都可能遇到处理 url 参数的问题,使用框架进行项目开发时或许不用,有自带的获取参数方式,但是抛开使用框架来说我们也可以使用原生 js 方式或者借用第三方库来实
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部