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

拖放是 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>

以下是效果图：

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

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

html显示器对象属性,Web网站中利用JavaScript中ActiveXObject对象获取硬件信息（显示器数量、分辨率）从而进行单双屏跳转...
前言:最近这两天工作上,要实现一个功能,在好友阿聪的帮助下,算是比较好的解决了这个需求. B/S的Web网站,需要实现点击按钮时,根据客户端连接的显示屏(监视器)数量进行,单双屏跳转显示新页面. 由于 ...
Web网站中利用JavaScript中ActiveXObject对象获取硬件信息（显示器数量、分辨率）从而进行单双屏跳转...
前言:最近这两天工作上,要实现一个功能,在好友阿聪的帮助下,算是比较好的解决了这个需求. B/S的Web网站,需要实现点击按钮时,根据客户端连接的显示屏(监视器)数量进行,单双屏跳转显示新页面. 由于 ...
FLASK中利用javascript实现按钮点击事件
1.建立js文件test.js function bindCaptchaBtnClick(){$("#captcha-btn").click(function(){alert(&q ...
oracle索引使用例子,Oracle中利用函数索引处理数据倾斜案例
关于B-Tree.Bitmap.函数索引的相关内容请参考另一篇博文: Oracle中B-Tree.Bitmap和函数索引使用案例总结通常来说,索引选取的数据列最好为分散度高.选择性好.从索引树结构的 ...
「后端小伙伴来学前端了」Vue中利用全局事件总线改造 TodoList 案例
前言上上篇写了:
好程序员技术文档HTML5开发中的javascript闭包
好程序员技术文档HTML5开发中的javascript闭包,事实上,通过使用闭包,我们可以做很多事情.比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率,同时避免对命 ...
php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下今天,你将学习一项称为Canvas(画布)的web技术,以及 ...
利用JavaScript在ASP.NET中动态生成系统菜单
用户在登陆一个系统后通常会因为权限的不同而使用不同的系统功能,我们在实现用户使用的菜单项时有两种选择,一是列出全部系统菜单项,根据用户的权限禁用一部分菜单,二是根据权限动态加载菜单,这样只要列出的 ...
在HTML5中如何利用Canvas处理并存储图片
HTML5中增加的Canvas元素,配合JS灵活的语法,处理起图片变得异常简单,不需要在客户端用C/C 写一大堆代码,对于熟悉JS的程序员来说,只需要考虑处理图片的逻辑了. canvas中如果想要处理 ...

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

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

最新文章

热门文章