当前位置: 传客网 > 一起来学HTML-HTML5-自定义元素,拖放

一起来学HTML-HTML5-自定义元素,拖放

2017-01-07 作者:潮爸_小奥

完美的 Shiv 解决方案

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。

 





 
 



HTML5 拖放(Drag 和 Drop)


拖放(Drag 和 drop)是 HTML5 标准的组成部分。


将w3cschool图标拖动到矩形框中。


拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。


浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。

注意:Safari 5.1.2不支持拖动.


HTML5 拖放实例

下面的例子是一个简单的拖放实例:

实例









ondragover="allowDrop(event)">



ondragstart="drag(event)" width="336" height="69">



尝试一下 »

它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。


设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :


 


拖动什么 - ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。


放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法:

event.preventDefault()


 


进行放置 - ondrop

当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementByIdx_x(data));
}

代码解释:

  • 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素(目标元素)中

 



相关推荐

  • 如何创建自定义的HTML元素

    HTML规范有一个令人感到兴奋的功能可以自己自定义HTML元素。这允许你可以根据自己的JavaScriptAPI创建自己的HTML元素。这在整个应用程序中构建接口和组件重用可能是非常有用的。在这篇文章中你可以学习到如何自定义自己的HTML元

  • 周报 | 电商首页导航自定义,社区可开通灌水功能

    ​电商:电商底部导航支持自定义站长可根据自己商品类目设置自己的电商导航啦!此前电商的底部导航固定为【商品】【购物车】【我的】​更新后,不仅可以自定义设置底部导航名称,还可以随意添加子菜单,并且选择链接类型还可以跳转到

  • Origin 8.x高级篇——自定义坐标轴

    Origin8.x高级篇——自定义坐标轴空间Origin8.x高级篇——自定义坐标轴我们在作图的时候,有时会希望在某些特定的数值上标注一些说明。一般情况下我们会在该特殊值的数据点上标注,比如我前面介绍过的,用拾取点“田”DataReader

  • teechart实现自定义坐标轴

    4.0上的版本可以实现自定义坐标轴的功能。具体步骤如下:1.在TeeChart上点击右键,选择EditChart对话窗体,先添加几个Series。2.选择Axis标签页,在Axes列表框下有一个‘+’按钮,点击加号按钮,就可以添加自定义坐标

  • 如何给FineReport设置自定义消息提醒工具

    FineReport设计器有自动的消息推送功能,可设置报表定时推送和常规的日报周报推送。官方有自己的消息推送的接口,不过有些用户旺旺希望自己开发,符合自己需求的推送界面。下面这个方案就从逻辑层面简单阐述一个通讯类应该怎么实现。废话不多说直接

  • (转载)JS 自定义对象.属性  java面向对象思想

    转载自:js自定义对象js自定义对象.属性js自定义对象一,概述在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类、Hashtable类等等。目前在Jav

  • OpenERP的自定义报表模块oecn_account_report

    OpenERP的自定义报表模块oecn_account_report原文地址:http://cn.openerp.cn/oecn_account_report/作者:上海_Jeff国外的ERP软件到了国内都会遇到政府规定的三大报表格式的问题

  • 优爱免费QQ机器人软件最新版下载,将您的QQ升级为智能,强大的在线自动回复机器人 可自定义关键词

    软件名称:QQ机器人10.0.4软件语言:中文软件大小:4.3M支持系统:Android2.2+以及更高版本软件介绍:将您的QQ升级为智能,强大的在线自动回复机器人!强大的在线云分析!可自定义关键词回复!QQ用户必备!软件下载地址:http

  • RobotFramework自定义关键字

    所谓自定义关键字,无非就是要自己来写啦,说是关键字好像很高大上一样,实际嘛就是自己写个方法而已啦,比如来个1+1=2的方法,soeasy啦,说真的,会一点java,玩python是有点吃力,但是思路都差不多,语言相通还是很有用的;废话不多说

  • 自定义转账在会计信息系统中的实现和应用

    自定义转账在会计信息系统中的实现和应用[摘要]本文通过武汉市一家电脑硬件销售商的会计电算化系统为例,介绍了自定义转账功能在会计核算中的应用。通过自定义转账的定义,转账凭证的生成,实现了对分都利润的柱算,明确了各个分部的绩效情况,便于各个分部

  • UITableView 应用(五)UITableView样式的自定义

    很多时候,我们需要自定义UITableView来满足我们的特殊要求。这时候,关于UITableView和cell的自定义和技巧太多了,就需要不断的总结和归纳。1.添加自定义的Cell。这个问题已经涉及过,但是,这里要说的主要是两种方法的比较

  • HTML 5 的data-* 自定义属性

    HTML5的data-*自定义属性发表于2014年04月9日by愚人码头被浏览23,038次HTML5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性,来

  • HTML自定义标签开发入门实例

    HTML自定义标签开发入门实例1.写在最前面自定义标签这个词大家不会陌生,但我们接触更多的是自定义JSP标签.本文介绍种自定义HTML标签的方法。在页面设计与布局的过程中,使用这种方法,将大大精简你的页面代码量并使你的代码极具个性,酷到极点

  • 利用 SimpleTagSupport开发自定义标签

    自定义标签库并不是JSP2才出现的,JSP1.1版中已经增加了自定义标签库规范,自定义标签库是一种非常优秀的表现层组件技术。通过使用自定义标签库,可以在简单的标签中封装复杂的功能。为什么要使用自定义标签呢?主要是为了取代丑陋的JSP脚本。在

  • 高德地图自定义大头针以及自定义气泡

    技术心得—高德地图自定义大头针以及弹出视图最近公司项目里需要使用到地图,里面还涉及到自定义大头针以及自定义弹出视图。下图是最终效果。使用高德地图遇到问题当然第一反应看高德官方文档,这是高德官方API链接:http://lbs.amap.co

  • 销售出库单自定义字段的设置

    问题描述:销售出库单自定义了表头字段,设置为必录项,且红蓝字可见设置为只在蓝字单据中可见,那录入红字销售出库单时必须录入该字段吗?解决方案:红字销售出库单录入时该自定义字段无需录入,单据自定义的字段设置为必录是在可见下才有意义。金蝶有问题,

  • 灵活的用户自定义报表 之二

    在集深数据系统的用户自定义报表中,用户可以自由选择所需要的数据集,然后通过拖拽的方式,快速生成所需要的数据列表或者数据透视表。在数据列表中,除了简单的数据列表外,还可以自由地对数据进行分组,比如下表中,基于地区和城市进行了分组,并且可以设置

  • VS自定义控件时出现的“系统找不到指定的文件”解决办法

    VS的自定义控件功能有利于将界面模块化,达到复用和分离的功能。但是在组装好总界面,写好自定义控件后,出现了一个设计器的错误,错误信息为“系统找不到指定的文件”,没有任何详细的信息。在百度上也没有相关的资料,后来我想应该和Delphi的设计理

  • Delphi技巧-用户自定义数据类型

    Delphi技巧-用户自定义数据类型Pascal语言的一个重要特征是它能自定义数据类型。通过各种类型构造器,你可以定义自己的数据类型,如子界类型、数组类型、记录类型、枚举类型、指针类型和集合类型。最重要的用户定义数据类型是类(class),

  • PASCAL精要——第四章 用户自定义数据类型  zz

    第四章用户自定义数据类型Pascal语言的一个重要特征是它能自定义数据类型。通过各种类型构造器,你可以定义自己的数据类型,如子界类型、数组类型、记录类型、枚举类型、指针类型和集合类型。最重要的用户定义数据类型是类(class),类是Obje

返回
顶部