hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

HTML5中怎样完成图片的拖放【html5教程】

2019-11-26HTML搜搜PHP网56°c
A+ A-
本日将和人人分享有关HTML5中拖放元素的用法,具有肯定的参考价值,愿望对人人有所协助。

【引荐课程: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中怎样完成图片的拖放的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
HTML5中怎样完成图片的拖放【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:
推荐阅读