其他分享
首页 > 其他分享> > 拖放API的回收站效果.html

拖放API的回收站效果.html

作者：互联网

垃圾桶的拖拽

点击查看代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5拖放API之回收站效果</title>
		<link rel="stylesheet" href="css/recycle.css">
    </head>
    <body>
        <h3>HTML5拖放API之回收站效果</h3>
        <hr />
		<!--文件展示区域-->
        <div id="container">
            <div id="file1" class="folder" draggable="true" ondragstart="drag(event)">
                文件1
            </div>
            <div id="file2" class="folder" draggable="true" ondragstart="drag(event)">
                文件2
            </div>
            <div id="file3" class="folder" draggable="true" ondragstart="drag(event)">
                文件3
            </div>
            <div id="file4" class="folder" draggable="true" ondragstart="drag(event)">
                文件4
            </div>
        </div>
		<!--回收站区域-->
        <div id="recycle" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
        <script>
		    //ondragstart事件回调函数
            function drag(ev) {
				//设置传递的内容为被拖拽元素的id名称，数据类型为纯文本类型
                ev.dataTransfer.setData("text/plain", ev.target.id);
            }
            //ondragover事件回调函数
			function allowDrop(ev) {
				//解禁当前元素为可放置被拖拽元素的区域
                ev.preventDefault();
            }
            //ondrop事件回调函数
			function drop(ev) {
				//解禁当前元素为可放置被拖拽元素的区域
                ev.preventDefault();
				//获取当前被放置的元素id名称
                var id = ev.dataTransfer.getData("text");
				//根据id名称获取元素对象
                var folder = document.getElementById(id);
				//获取文件夹区域并删除该元素对象
                document.getElementById("container").removeChild(folder);
            }
        </script>
    </body>
</html>
css样式
点击查看代码 
/*设置可放置区域样式*/
#recycle {
    width: 200px;
    height: 50px;
    border: 1px dashed;
    text-align: center;
    line-height: 50px;
}
/*设置图片相框效果样式*/
.photoframe {
    background: url(../image/photoframe.jpg) no-repeat;
    width: 500px;
    height: 438px;
    text-align: center;
    float: left;
}
/*设置图片垂直方向居中显示*/
img {
    vertical-align: middle;
}
/*设置图片2的样式*/
.block {
    width: 0px;
    height: 100%;
}
/*设置带有相框的图片展示区域样式*/
#output {
    float: left;
    margin: 10px;
    text-align: center;
    width: 500px;
}

标签：text,元素,height,width,html,拖放,ev,id,回收站
来源： https://www.cnblogs.com/fzlgxy085/p/15920191.html