HTML拖放选择图片、删除选择功能，上边有几个按钮，分别是选择全部，全部不选，删除，也可以鼠标点选任意一个图片，将图片拖动到指定的盒子内，再点击Delete后可删除。
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：<img style="margin-top: 100px" src="small2.png" />。
3、浏览器运行index.html页面，此时图片被向下移动了100px。
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
padding: 0
margin: 0
width: 100%
height: 100%
}
#md{
position: fixed
z-index: 1
height:100px
width: 100px
opacity: 1
background-color: #00b2ad
}
#outer{
box-sizing: border-box
position: relative
top: 200px
left: 350px
width: 110px
height: 110px
border: 1px solid blueviolet
}
</style>
</head>
<body>
<div id="md" data="这里是地址"></div>
<div id="outer"></div>
<script>
function fn(){
var keycode = window.event.keyCode
}
var mdiv = document.getElementById("md"),
mbody = document.getElementsByTagName("body")[0],
flag = false,
mouter = document.getElementById("outer"),
moTop = mouter.offsetTop,
moLeft = mouter.offsetLeft,
moBot = moTop + mouter.offsetHeight,
moRig = moLeft + mouter.offsetWidth,
mdh = mdiv.offsetHeight / 2,
mdw = mdiv.offsetWidth / 2,
mdTop,mdLeft,mdRig,mdBot
mdiv.onmousedown = function(){
flag = true
mdiv.style.opacity = 0.75
mbody.onmousemove = function(e){
if(flag){
mdiv.style.top = e.pageY - mdh +"px"
mdiv.style.left = e.pageX - mdw +"px"
}
}
mbody.onmouseup = function(){
mdiv.style.opacity = 1
flag = false
mdTop = mdiv.offsetTop
mdLeft = mdiv.offsetLeft
mdBot = mdTop + mdiv.offsetHeight
mdRig = mdLeft + mdiv.offsetWidth
if(mdTop>moTop && moBot > mdBot && mdLeft > moLeft && moRig > mdRig){
location.href = mdiv.getAttribute("data")
}
}
}
</script>
</body>
</html>
