如何使用HTML5实现网页元素的拖放操作

发布时间:2021-10-11 09:30:19 作者:小新
来源:亿速云 阅读:165

这篇文章将为大家详细讲解有关如何使用HTML5实现网页元素的拖放操作,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

场景:

如下图所示,我们要实现:

通过拖放将照片从左侧“相册”区域拖拽到右侧“垃圾箱”区域;拖拽过程中,“温馨提示”部分要及时提醒,当前正在进行拖放操作;

如何使用HTML5实现网页元素的拖放操作

实现方法:

如上界面的HTML代码比较简单,如下:

代码如下:


<!DOCTYPE HTML>
<html>
<head>
   <title>HTML5实现拖拽操作</title>
   <meta charset="utf-8"/>
   <style>
       .album
       {
           border: 3px dashed #ccc;
           float: left;
           margin: 10px;
           min-height: 100px;
           padding: 10px;
           width: 220px;
       }
   </style>
</head>
<body">
   <div id="info">
       <h3>温馨提示:可将照片直接拖到垃圾箱中</h3>
   </div>
   <div id="album" class="album">
       <h3>相册</h3>
       <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">
       <h3>垃圾箱</h3>
   </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="<h3>温馨提示:可将照片直接拖到垃圾箱中</h3>";
               };
               e.dataTransfer.setData("text",dragImgId);
           };
           //拖放过程中
           src.ondrag = function(e){  
               info.innerHTML="<h3>--照片正在被拖动--</h3>";
           }
           //获得拖放的目标元素
           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="<h3>温馨提示:可将照片直接拖到垃圾箱中</h3>";
               e.preventDefault();
           }
       }
   </script>

关于“如何使用HTML5实现网页元素的拖放操作”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. HTML5 如何实现拖放'N'拖放
  2. HTML5如何实现多个元素的拖放功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:高并发中Poll和Epoll以及Future的概念是什么

下一篇:如何在Mac上设置代理服务器

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》