html5拖曳实际操作 HTML5完成网页页面元素的拖放实

日期:2021-02-26 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

HTML5以前,要完成网页页面元素的拖放实际操作,必须借助mousedown、mousemove、mouseup等API,根据很多的JS编码来完成;HTML5中引进了立即适用拖放实际操作的API,大大简化了网页页面元素的拖放实际操作程序编写难度,而且这些API除适用访问器內部元素的拖放外,另外适用访问器和其它运用程序流程之间的数据信息相互之间拖拽。

本文根据1个简易示例,演试HTML5中拖放API的应用方式。

情景:

以下图所示,大家要完成:

根据拖放将相片从左边“相册”地区拖拽到右边“废弃物箱”地区;拖拽全过程中,“温暖提醒”一部分要立即提示,当今正在开展拖放实际操作;


完成方式:

如上页面的HTML编码较为简易,以下:

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5完成拖拽实际操作</title>
<meta charset="utf⑻"/>
<style>
.album
{
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
}
</style>
</head>
<body">
<div id="info">
<h2>温暖提醒:可将相片立即拖到废弃物箱中</h2>
</div>
<div id="album" class="album">
<h2>相册</h2>
<img draggable="true" id="img1" src="img/bg_01.png" />
<img draggable="true" id="img2" src="img/bg_02.png" />
<img draggable="true" id="img3" src="img/bg_03.png" />
</div>
<div id="trash" class="album">
<h2>废弃物箱</h2>
</div>
<br/>
</body>
</html>

留意:假如要完成拖放实际操作,必须在待拖放的元素上提升draggable="true"特性;

接下来,再在onload恶性事件中提升以下JS编码便可,注解较为详细,就已不独立解释。

拷贝编码
编码以下:

<script>
function init(){
var info = document.getElementById("info");
//得到被拖放的元素,本示例为相册所属的DIV
var src = document.getElementById("album");
//刚开始拖放实际操作
src.ondragstart = function (e) {
//得到被拖放的相片ID
var dragImgId = e.target.id;
//得到被拖拽元素
var dragImg = document.getElementById(dragImgId);
//拖放实际操作完毕
dragImg.ondragend = function(e){
//修复提示信息内容
info.innerHTML="<h2>温暖提醒:可将相片立即拖到废弃物箱中</h2>";
};
e.dataTransfer.setData("text",dragImgId);
};
//拖放全过程中
src.ondrag = function(e){
info.innerHTML="<h2>--相片正在被拖拽--</h2>";
}
//得到拖放的总体目标元素
var target = document.getElementById("trash");
//关掉默认设置解决;
target.ondragenter = function(e){
e.preventDefault();
}
target.ondragover = function(e){
e.preventDefault();
}
//有物品拖放到了总体目标元素
target.ondrop = function (e) {
var draggedID = e.dataTransfer.getData("text");
//获得相册中的DOM目标
var oldElem = document.getElementById(draggedID);
//从相册DIV中删掉该相片的连接点
oldElem.parentNode.removeChild(oldElem);
//将被拖拽的相片DOM连接点加上到废弃物桶DIV中;
target.appendChild(oldElem);
info.innerHTML="<h2>温暖提醒:可将相片立即拖到废弃物箱中</h2>";
e.preventDefault();
}
}
</script>

完成实际效果: