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

本日将和人人分享有关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>

结果图