首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML5 拖放

拖放HTML5 标准中的一部分,任何标签元素都能够被拖放。 二、为什么需要拖放?...,这些模块的摆放一般有一个初始默认位置,各种角色的管理员可以根据自己的喜好来将这些模块按照自己的习惯进行拖动摆放 在HTML5 之前,我们要想实现针对页面中的标签元素的 移动和拖放,没有一个统一的操作标准...,一般都是监听鼠标点击事件、鼠标移动事件然后配合 DOM对标签元素的操作 来实现 三、HTML5 拖放(Drag 和 drop)的浏览器兼容 Internet Explorer 9+、Firefox、Opera...注:Safari 5.1.2不支持拖动 HTML5 拖放实例 一、实现标签元素的拖放步骤 由于要实现对某个元素的拖放功能,需要事先进行多个参数的设置,所以这里存在了步骤的概念,我们按照如下步骤进行即可,...、设置拖动元素的新位置(ondrop) 当我们松开鼠标后,表示我们要放置被拖动的数据,这时会发生 drop 事件,我们要规定被拖动的元素需要放置的新位置,这里给div容器添加 ondrop 事件,如下代码

1.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    理论 | HTML5 进阶系列:拖放 API 实现拖放排序

    HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能。...而 img 元素和 a 元素都默认设置了 draggable 属性为 true,可直接拖放,如果不想拖放这两个元素,把属性设为 false 即可。 拖放事件 拖放事件由不同的元素产生。...2、text/htmlHTML文字。 3、text/xml:XML文字。 4、text/uri-list:URL列表,每个URL为一行。 第二个参数为要存入的数据。...主要代码如下: 完整的代码地址:https://github.com/lin-xin/blog/tree/master/drag-demo 兼容 主要是在IE中的兼容不太好,不过至少在IE10中能兼容上面的拖动排序...插件地址:ios-html5-drag-drop-shim 只需要在原有的代码中引入该插件,即可在移动端上实现拖动了。 扫码下方二维码, 随时关注更多前端干货文章! ▼ 微信:IMWebTech

    1.3K31

    HTML5绘画与拖放事件

    HTML5绘画 在html5中出现了许多新的特性,绘画功能就是其中之一。由于html5新增的这些新特性,所以也在逐渐取代Flash,毕竟Flash比较占用内存,也经常性奔溃。...html5不仅能制作2d的绘画还能做3d的绘画,但是要注意的是这两者使用的函数不一样但都基于canvas。在网络上我们可以搜索到一些使用html5制作的2D或3D的效果图,例如: ? ? ?...在以上代码中,我们需要通过getContext函数来创建Context绘画对象,Context对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。...拖放事件 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够实现拖放。...结合以上几个知识点,可以实现将img元素,来回拖放到不同的div元素中,代码示例: ? 运行结果: ? ? ?

    3K30

    HTML5中的拖放功能

    image 知识点 拖拽的体验,你享受过吗,在HTML5之前,可以使用事件mousedown,mousemove,mouseup巧妙实现页面的拖放操作,但注意拖放的操作范围只是局限在浏览器内部。...而HTML5拖放API功能直接实现拖放操作,而且拖放的范围已经超出浏览器的边界,HTML5提供的文件api支持拖拽多个文件并上传。...要学会掌握html5中的拖放api和 文件api,光标拖放事件,从web网页上访问本地文件系统。...拖放api 在html5中的拖放api重点: 第一,为页面元素提供了拖放特性; 第二,为光标增加了拖放事件; 第三,提供了用于存储拖放数据的DataTransfer对象 draggable特性 draggable...光标拖放事件 在html5中提供了7个与拖放相关的光标事件: 按照时间的顺序: 第一,开始拖拽时触发的事件,事件的作用对象是被拖拽的元素-dragstart事件 第二,拖放过程中触发的事件,事件的作用对象是被拖拽的元素

    2.6K10

    HTML拖放介绍

    1.在jQuery UI里面会经常使用Draggable和Droppable,实现Web开发中拖放效果,当然这不是原生条的拖放,所以在处理复杂的拖放上还是需要自己动手写很多代码,最近开发中就遇到这个问题...Web拖放发展历史 第一阶段: 因为HTML和DOM可以处理底层的鼠标事件,所以早起的开发人员可以借助Javascript和CSS,DOM事件基础,可以近似实现一个简单的拖放功能。...第三阶段: HTML5发布之后,技术越来越成熟。而已标准中提供了拖放的API,所以越来越多的公司关注HTML5拖放操作。看一个Skydrive上传文件的示例和Dropbox上传文件的示例。...因为没有具体查看代码,不知道这2家公司是否也是使用了HTML5的Drag API,同时没有去测试对较老的浏览器的支持,所以不知道他们是使用的哪种技术。...参考网址: http://jqueryui.com http://www.prohtml5.com

    3.1K100

    HTML5原生拖放事件的学习与实践

    前言 之前学习了 HTML5拖放事件,开发中也用到了拖拽组件。为了厘清整体的逻辑,专门做了一个小例子。...专注前端与算法的系列干货分享,转载请声明出处:原文链接: xxoo521.com 拖放事件介绍 由名字可以看出来,拖放事件由 2 部分组成:拖动和释放。...效果展示 为了方便说明,先看代码实现的效果。请前往 Github 仓库 下载 demo.html 和 demo.js 到本地,然后用 Chrome 打开 html 文件,初始效果如下图: ?...代码实现 首先,先编写 html 代码。因为元素可以在两个容器之间任意拖动,因此这两个容器都需要监听 drapenter、dragover、dragleave、drop 这四个事件。...: Github 《HTML5 拖放》 《HTML5 原生拖拽/拖放

    1.2K20
    领券