前端新技术：HTML5实现网页元素的拖动操作

HTML5之前，要实现网页元素的拖动操作，需要依靠mousedown、mousemove、mouseup等API，通过大量的JS代码来实现；HTML5 中引入了直接支持拖动操作的API，大大简化了网页元素的拖动操作编程难度，并且这些API除了支持浏览器内部元素的拖动外，同时支持浏览器和其它应用程序之间的数据互相拖动。

本文通过一个简单示例，演示HTML5中拖动API的使用方法。

场景：

如下图所示，我们要实现：

  1. 通过拖动将照片从左侧“相册”区域拖拽到右侧“垃圾箱”区域；可以500%提高开发效率的前端UI框架！
  2. 拖拽过程中，“温馨提示”部分要及时提醒，当前正在进行拖动操作；

    实现方法：

    如上界面的HTML代码比较简单，如下： 可以500%提高开发效率的前端UI框架！

    .代码  

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <title>HTML5实现拖拽操作</title>
    5. <meta charset="utf-8"/>
    6. <style>
    7. .album
    8. {
    9. border: 3px dashed #ccc;
    10. float: left;
    11. margin: 10px;
    12. min-height: 100px;
    13. padding: 10px;
    14. width: 220px;
    15. }
    16. </style>
    17. </head>
    18. <body">
    19. <div id="info">
    20. <h2>温馨提示：可将照片直接拖到垃圾箱中</h2>
    21. </div>
    22. <div id="album" class="album">
    23. <h2>相册</h2>
    24. <img draggable="true" id="img1" src="img/bg_01.png"  />
    25. <img draggable="true" id="img2" src="img/bg_02.png"  />
    26. <img draggable="true" id="img3" src="img/bg_03.png"  />
    27. </div>
    28. <div id="trash" class="album">
    29. <h2>垃圾箱</h2>
    30. </div>
    31. <br/>
    32. </body>
    33. </html>

    注意：如果要实现拖动操作，需要在待拖动的元素上增加draggable="true"属性；

    接下来，再在onload事件中增加如下JS代码即可，注释比较详尽，就不再单独解释。 可以500%提高开发效率的前端UI框架！

    .代码  

    1. <script>
    2. function init(){
    3. var info = document.getElementById("info");
    4. //获得被拖动的元素，本示例为相册所在的DIV
    5. var src = document.getElementById("album");
    6. //开始拖动操作
    7. src.ondragstart = function (e) {
    8. //获得被拖动的照片ID
    9. var dragImgId = e.target.id;
    10. //获得被拖动元素
    11. var dragImg = document.getElementById(dragImgId);
    12. //拖动操作结束
    13. dragImg.ondragend = function(e){
    14. //恢复提醒信息
    15. info.innerHTML="<h2>温馨提示：可将照片直接拖到垃圾箱中</h2>";
    16. };
    17. e.dataTransfer.setData("text",dragImgId);
    18. };
    19. //拖动过程中
    20. src.ondrag = function(e){
    21. info.innerHTML="<h2>--照片正在被拖动--</h2>";
    22. }
    23. //获得拖动的目标元素
    24. var target = document.getElementById("trash");
    25. //关闭默认处理；
    26. target.ondragenter = function(e){
    27. e.preventDefault();
    28. }
    29. target.ondragover = function(e){
    30. e.preventDefault();
    31. }
    32. //有东西拖动到了目标元素
    33. target.ondrop = function (e) {
    34. var draggedID = e.dataTransfer.getData("text");
    35. //获取相册中的DOM对象
    36. var oldElem = document.getElementById(draggedID);
    37. //从相册DIV中删除该照片的节点
    38. oldElem.parentNode.removeChild(oldElem);
    39. //将被拖动的照片DOM节点添加到垃圾桶DIV中；
    40. target.appendChild(oldElem);
    41. info.innerHTML="<h2>温馨提示：可将照片直接拖到垃圾箱中</h2>";
    42. e.preventDefault();
    43. }
    44. }
    45. </script>

    实现效果：

    时间： 2024-12-13 09:16:54

    前端新技术：HTML5实现网页元素的拖动操作的相关文章

    web前端基础：常用网页元素命名规范

    网页元素名称的规范性有助于团队内部成员的沟通,同时还能够提高后期的维护性,网页元素的命名主要是针对id和class进行的,针对网页元素的命名没有业界标准,但有一些大家公认的规则. 一般情况下id我们通常采用camelCase命名规则(首字母小写,其它单词首字母大写),比如:studentName和fontColor等.针对Class的命名,我们不难发现,很多开源框架都使用短横线分割小写单词,比如:ui-widget-header和content-right,除了遵守这样的规则外,一个有意义的名称

    HTML5 元素拖动 - 实现元素左右拖动， 或更改自身排序

    1.拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持:Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放(注:在 Safari 5.1.2 中不支持拖放.). 2.相关属性及方法  设置元素为可拖放,把 draggable 属性设置为 true <labeldraggable="tr

    前端：HTML5学习之路（一）

    第1章 HTML5基础 关于HTML5基础这一部分的内容没有明显边界.各种HTML5教材关于HTML5基础知识的介绍大同小异,这里不做过多赘述. 1. 我们要把HTML5简单用起来,首先要学会新建HTML5文档.每个网页都包含doctype.html.head和body元素,以下是一个简单的HTML5文档示例(用到了a.article.em.h1.img和p这6种常见的元素): 1 <!doctype html> 2 <html> 3 <head> 4 <meta

    HTML5 画布canvas元素

    HTML5 画布canvas元素 HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小看了这个画布,它能实现无限的可能性.接下来我们从最简单的部分开始,逐步认识Canvas的强大功能. 1.在页面中添加canvas元素: 默认情况下,Canvas所创建的矩形区域大小为宽300像素,高150像素,不过我们可以使用width和height属性来自定义画布

    15个前卫的 HTML5 &amp; CSS3 网页设计作品

    今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案. HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览. 您可能感兴趣的相关文章 那些让人赞不绝口的创新 HTML5 网站 激发你灵感的20个多彩的网页作品案例 30个独具匠心的精美单页网站设计案例 20个与众不同的网页联系表单设计案

    S1/使用HTML语言和CSS开发商业站点/08-定位网页元素

    在CSS中有3种基本的定位机制,分别是标准流.浮动和绝对定位.通常在网页中除非专门指定某种元素的定位,否则所有元素都在标准流中定位,也就是说标准流中元素的位置由在XHML中的位置决定. 在前面的章节已经学习了标准流和浮动,使用浮动的方式可以定位网页元素.但是仅使用浮动一种方式,完成不了网页中很多更为复杂的网页效果. Position属性 Position属性yufloat属性一样,都是CSS排版中非常重要的概念.Position从字面意思上看就是指定盒子的位置,指它相对父级的位置和相对它自身应该

    Html5 实现网页截屏 页面生成图片(图文)

    html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能. 因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样. 环境要求: jQuery兼容性: Firefox 3.5+, Chrome, Opera, IE9 官网主页: http://html2canvas.hertzen.com/ 测试生成的图片效果 有些元素的样式没有完全展示出来 1 <html> 2 <head> 3 <meta name=&q

    移动前端的html5 head 头标签

    本文主要内容来自HTML head头标签 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签显得非常重要. DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范. <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> charset 声明文档使用的字符编码, <me

    HTML5 &lt;template&gt;标签元素简介

    一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是"模板元素". 目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法: <script type="text/template"> // ... </script> 实际上,并不存在type="text/template"这样的标准写法,<template&g