HTML5中利用JavaScript实现拖放（来回）的案例

最新推荐文章于 2024-08-11 09:55:43 发布

向前前前看

最新推荐文章于 2024-08-11 09:55:43 发布

阅读量1.3k

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/weixin_41155788/article/details/82692260

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

拖放是 HTML5 中非常常见的功能。

注意：默认情况下，元素是不可拖动的，为了让元素可拖动，需要将 HTML5 的draggable 属性设置为true。

提示：链接和图片默认是可拖动的，不需要 draggable 属性。

实现来回拖放的思路：

建立两个框（左框和右框），左框作为图像拖动回来时的容器不设置背景色，右框作为图像拖动出去的容器。

开始示范：

以下是CSS样式

body {
	margin:60px;
	background:#fff;
	position:relative;
}
#logo{
	width:300px;
	height:200px;
	background:url(logo-mask.png) center 50% no-repeat;
	position:absolute;
	left:0;
}/*需要拖动的图标*/
#box0{
	width:300px;
	height:200px;
	position:absolute;
	left: :0;
	z-index: -1;/*设置为最底层*/
}/*左侧框作为拖动回来的容器*/
#box{
	width:300px;
	height:200px;
	background:#d4efdf;
	border-radius:10px;/*设置边框弧度*/
	border:5px dashed #27AE60;
	position:absolute;
	right:0;
}/*右侧框作为拖动出去的容器*/

以下是主体部分：

Body部分
<body>
<div id="logo"></div>
<div id="box0"></div><!--左侧框作为拖动回来的容器-->
<div id="box"></div><!--右侧框作为拖动出去的容器-->
</body>

以下是JavaScript部分

<script type="text/javascript">
var logo = document.getElementById("logo");
var box = document.getElementById("box");
logo.draggable = true;/*使logo图标可拖动，因为元素默认是不可拖动的。*/
box.ondragover = function(ev){
	ev.preventDefault();
}/*去除事件的默认行为，因为当logo拖动到右框中时，会不断触发box的ondragover事件，而该事件默认是无法将数据或元素放置到其他元素中的，所以需要取消该事件的默认行为。以下的box0的ondragover事件同理。*/
box.ondrop = function(ev){
	box.appendChild(logo);
}/*将图标移动到右侧框中*/
box0.ondragover = function(ev){
	ev.preventDefault();
}
box0.ondrop = function(ev){
	box0.appendChild(logo);	
}
</script>

以下是效果图：

右侧框（即拖动出去后的效果）：；左侧框（即拖动回来后的效果）：。